From 00411a5328a81aac5e1c0308944bbb3b4b3e4578 Mon Sep 17 00:00:00 2001 From: Ramya Date: Tue, 30 Sep 2025 16:19:10 +0530 Subject: [PATCH 01/10] 984376: Added example for diagram component --- Diagram/Server/App.razor | 13 + .../Accessibility/KeyBoardNavigation.razor | 987 ++++++++++++++++++ .../Annotations/AddAnnotationAtRunTime.razor | 39 + .../Server/Pages/Annotations/AddAsync.razor | 40 + .../Annotations/AdditionalInfoProperty.razor | 43 + .../AlignmentOfConnectorAnnotation.razor | 39 + .../AlignmentOfNodeAnnotation.razor | 36 + .../AnnotationOfNodeAlignText.razor | 38 + .../AnnotationStyleAtRunTime.razor | 60 ++ .../AnnotationWithTextOverflow.razor | 41 + .../AnnotationWithTextWrapping.razor | 40 + .../Server/Pages/Annotations/Appearance.razor | 45 + .../Pages/Annotations/CreateAnnotation.razor | 47 + .../DisplacementOfConnectorAnnotation.razor | 38 + .../Annotations/HyperLinkWithContent.razor | 40 + .../Annotations/HyperLinktoAnnotation.razor | 39 + .../Annotations/MarginOfNodeAnnotation.razor | 38 + .../Annotations/MultipleAnnotation.razor | 75 ++ .../Annotations/OffsetOfNodeAnnotation.razor | 34 + .../Annotations/ReadonlyConstraints.razor | 36 + .../Pages/Annotations/RemoveAnnotation.razor | 43 + .../RemoveAnnotationUsingRemoveAt.razor | 42 + .../Annotations/RotationAngleProperty.razor | 33 + .../Pages/Annotations/RotationReference.razor | 52 + .../SegmentAngleOfConnectorAnnotation.razor | 34 + .../Pages/Annotations/SizeOfAnnotation.razor | 35 + .../TemplateSupportforAnnotation.razor | 51 + .../Pages/Annotations/TextChangedEvent.razor | 41 + .../Pages/Annotations/UpdateAnnotation.razor | 38 + .../UpdateOffsetofConnectorAnnotation.razor | 45 + .../Pages/BpmnEditor/BpmnActivity/Adhoc.razor | 34 + .../BpmnActivity/BpmnActivity.razor | 33 + .../BpmnActivityCollapsedSubProcess.razor | 34 + .../BpmnActivity/BpmnActivityTask.razor | 35 + .../Pages/BpmnEditor/BpmnActivity/Call.razor | 35 + .../BpmnActivity/Compensation.razor | 35 + .../Pages/BpmnEditor/BpmnActivity/Loop.razor | 34 + .../BpmnActivity/SubProcessType.razor | 34 + .../BpmnConnectors/Association.razor | 30 + .../BpmnEditor/BpmnConnectors/Message.razor | 30 + .../BpmnEditor/BpmnConnectors/Sequence.razor | 30 + .../BpmnDataObject/BpmnDataObject.razor | 34 + .../BpmnDataStore/BpmnDataStore.razor | 30 + .../BpmnEvent/BpmnEventTrigger.razor | 35 + .../BpmnEditor/BpmnEvent/BpmnEventType.razor | 34 + .../BpmnExpandedSubProcess/AddChildren.razor | 40 + .../BpmnExpandedSubProcess.razor | 30 + .../ExpandedSubProcessAdhoc.razor | 33 + .../ExpandedSubProcessCompensation.razor | 33 + .../ExpandedSubProcessLoop.razor | 33 + .../ExpandedSubProcessType.razor | 33 + .../BpmnEditor/BpmnGateway/BpmnGateway.razor | 33 + .../BpmnEditor/BpmnShape/BpmnShape.razor | 33 + .../BpmnTextAnnotation.razor | 40 + .../TextAnnotationTarget.razor | 58 + .../Server/Pages/Commands/AlignBottom.razor | 56 + .../Server/Pages/Commands/AlignCenter.razor | 55 + Diagram/Server/Pages/Commands/AlignLeft.razor | 56 + .../Server/Pages/Commands/AlignMiddle.razor | 55 + .../Server/Pages/Commands/AlignRight.razor | 54 + Diagram/Server/Pages/Commands/AlignTop.razor | 56 + .../Server/Pages/Commands/BringForward.razor | 56 + .../Pages/Commands/BringIntoCenter.razor | 31 + .../Server/Pages/Commands/BringIntoView.razor | 30 + .../Server/Pages/Commands/BringToFront.razor | 57 + Diagram/Server/Pages/Commands/CanZoomIn.razor | 115 ++ .../Pages/Commands/ClipboardCommands.razor | 72 ++ .../Pages/Commands/CustomCommands.razor | 93 ++ Diagram/Server/Pages/Commands/FitToPage.razor | 130 +++ .../Pages/Commands/GroupingCommands.razor | 60 ++ .../Commands/ModifyExistingCommands.razor | 85 ++ .../Server/Pages/Commands/NudgeCommand.razor | 35 + .../Server/Pages/Commands/SendBackward.razor | 56 + .../Server/Pages/Commands/SendToBack.razor | 56 + .../Commands/SetDistributeCommands.razor | 104 ++ .../Pages/Commands/SizingCommands.razor | 71 ++ .../Pages/Commands/UndoRedoCommands.razor | 49 + .../Pages/Commands/ZoomingCommands.razor | 40 + .../Connector/AddConnectorAtRuntime.razor | 24 + ...dConnectorThroughConnectorCollection.razor | 25 + .../Connector/BezierAllowSegmentsReset.razor | 64 ++ .../BezierConnectorMultiSegment.razor | 63 ++ .../BezierControlPointsVisibility.razor | 84 ++ .../Connectors/Connector/BezierSegment1.razor | 66 ++ .../Connectors/Connector/CloneConnector.razor | 40 + .../Connector/ConnectWithNode.razor | 61 ++ .../Connector/ConnectWithPort.razor | 93 ++ .../Connector/ConnectorFromPalette.razor | 71 ++ .../Connector/RemoveConnectorsAtRunTime.razor | 41 + .../Connector/UpdateConnectorAtRunTime.razor | 40 + .../Connectors/Customization/Bridging.razor | 83 ++ .../Customization/ConnectionPadding.razor | 42 + .../Customization/Constraints.razor | 49 + .../Customization/CornerRadius.razor | 50 + .../Customization/CustomProperty.razor | 50 + .../Connectors/Customization/Decorator.razor | 44 + .../Customization/DecoratorAppearance.razor | 58 + .../Customization/DecoratorAppearance1.razor | 57 + .../Customization/MaxSegmentThumb.razor | 47 + .../MaxSegmentThumbRuntime.razor | 84 ++ .../Connectors/Customization/Padding.razor | 58 + .../Customization/SegmentAppearance.razor | 49 + .../SourcePaddingAndTargetPadding.razor | 43 + .../Customization/ZIndexProperty.razor | 31 + .../Events/CollectionChangeEvent.razor | 34 + .../Events/ConnectionChangeEvent.razor | 71 ++ .../Connectors/Events/ConnectorCreating.razor | 44 + .../Connectors/Events/MouseEnterEvent.razor | 33 + .../Connectors/Events/MouseHoverEvent.razor | 33 + .../Connectors/Events/MouseLeaveEvent.razor | 33 + .../Events/PositionChangeEvent.razor | 62 ++ .../Events/PropertyChangedEvent.razor | 40 + .../Events/SegmentCollectionChangeEvent.razor | 39 + .../Events/SelectionChangeEvent.razor | 62 ++ .../Events/SourcePointChanged.razor | 48 + .../Events/TargetPointChanged.razor | 47 + .../Interaction/AvoidLineOverlap.razor | 371 +++++++ .../Interaction/ClassicLineRouting.razor | 36 + .../Interaction/ConnectorSplitting.razor | 71 ++ .../Interaction/DefaultRouting.razor | 51 + .../Pages/Connectors/Interaction/Drag.razor | 56 + .../Interaction/EndPointDragging.razor | 53 + .../Interaction/LineRoutingSettings.razor | 38 + .../Interaction/NodeRoutingObstable.razor | 51 + .../Interaction/ObstaclePadding.razor | 39 + .../Interaction/RoutingConstraints.razor | 66 ++ .../Pages/Connectors/Interaction/Select.razor | 64 ++ .../Pages/Connectors/Segments/Bezier.razor | 39 + .../Segments/BezierSegmentShape.razor | 38 + .../Segments/MultipleSegments.razor | 40 + .../Connectors/Segments/Orthogonal.razor | 38 + .../Segments/OrthogonalSegmentEditing.razor | 28 + .../Segments/OrthogonalThumbSetting.razor | 26 + .../Segments/OrthogonalThumbShape.razor | 26 + .../Connectors/Segments/SegmentShape.razor | 38 + .../Pages/Connectors/Segments/Straight.razor | 38 + .../Segments/StraightSegmentEditing.razor | 35 + .../Segments/StraightSegmentShape.razor | 34 + .../Segments/StraightSegmentShape1.razor | 35 + .../Pages/Constraints/AddOperation.razor | 11 + .../Constraints/AnnotationConstraints.razor | 45 + .../Constraints/BoundaryConstraints.razor | 28 + .../Constraints/ConnectorConstraints.razor | 28 + .../Constraints/DiagramConstraints.razor | 29 + .../Pages/Constraints/InheritBehaviors.razor | 37 + .../Pages/Constraints/NodeConstraints.razor | 30 + .../Pages/Constraints/PortConstraints.razor | 38 + .../Pages/Constraints/RemoveOperation.razor | 12 + .../Constraints/SelectorConstraints.razor | 30 + .../Pages/Constraints/SnapConstraints.razor | 28 + .../Container/ContainerHeaderSample.razor | 70 ++ .../Pages/Container/ContainerNode.razor | 27 + .../Pages/Container/ContainerPalette.razor | 82 ++ .../Pages/Container/ContainerSample.razor | 54 + .../Pages/ContextMenu/ContextMenuEvents.razor | 109 ++ .../ContextMenuItemClickedEvent.razor | 16 + .../ContextMenuOpenningEvent.razor | 16 + .../ContextMenu/ContextMenuTemplate.razor | 108 ++ .../Pages/ContextMenu/CustomContextMenu.razor | 85 ++ .../ContextMenu/CustomContextMenuOnly.razor | 109 ++ .../ContextMenu/DefaultContextMenu.razor | 75 ++ .../DiagramWithCustomAdaptor.razor | 213 ++++ .../DataBinding/DiagramWithRemoteData.razor | 146 +++ .../Server/Pages/DataBinding/DynamicObj.razor | 190 ++++ .../Pages/DataBinding/ExpandoObject.razor | 170 +++ .../Server/Pages/DataBinding/JSONData.razor | 61 ++ .../Server/Pages/DataBinding/LocalData.razor | 97 ++ .../Pages/DataBinding/ODataAdaptor.razor | 88 ++ .../Pages/DataBinding/ODataV4Adaptor.razor | 84 ++ .../Parent-Child Relationship.razor | 54 + .../Server/Pages/DataBinding/RemoteData.razor | 97 ++ .../Server/Pages/DataBinding/URLAdaptor.razor | 83 ++ .../Pages/DataBinding/WebAPIAdaptor.razor | 83 ++ .../DrawingTools/ConnectorDrawTool.razor | 63 ++ .../Pages/DrawingTools/FreehandDrawTool.razor | 54 + .../Pages/DrawingTools/MultipleTools.razor | 15 + .../Pages/DrawingTools/NodeDrawTool.razor | 55 + .../Pages/DrawingTools/PolygonShapeTool.razor | 60 ++ .../Pages/DrawingTools/PolylineDrawTool.razor | 55 + .../Pages/DrawingTools/TextNodeDrawTool.razor | 55 + .../Pages/DrawingTools/ToolSelection.razor | 13 + Diagram/Server/Pages/Events/ClickEvent.razor | 32 + .../Server/Pages/Events/CreatedEvent.razor | 34 + Diagram/Server/Pages/Events/DragDrop.razor | 55 + .../Server/Pages/Events/DragLeaveEvent.razor | 206 ++++ .../Server/Pages/Events/DragStartEvent.razor | 51 + .../Server/Pages/Events/DraggingEvent.razor | 55 + .../Server/Pages/Events/KeyDownEvent.razor | 33 + Diagram/Server/Pages/Events/KeyUpEvent.razor | 33 + .../Pages/Events/OnAutoScrollChange.razor | 58 + Diagram/Server/Pages/Export/Export.razor | 26 + .../Pages/Export/ExportClipBounds.razor | 24 + .../Server/Pages/Export/ExportMargin.razor | 24 + .../Server/Pages/Export/ExportOption.razor | 19 + .../Pages/Export/ExportOrientation.razor | 27 + .../Server/Pages/Export/ExportRegion.razor | 24 + Diagram/Server/Pages/Export/ExportToPDF.razor | 73 ++ .../Server/Pages/Export/ExportWithPage.razor | 27 + .../Pages/Export/ExportWithPageSize.razor | 21 + Diagram/Server/Pages/Flip/FlipDirection.razor | 187 ++++ Diagram/Server/Pages/Flip/FlipGroup.razor | 193 ++++ .../Pages/GettingStarted/GettingStarted.razor | 125 +++ .../Server/Pages/Gridlines/Appearance.razor | 13 + .../Pages/Gridlines/CustomGridline.razor | 38 + .../Pages/Gridlines/CustomizeGridline.razor | 22 + .../Gridlines/CustomizeSnapInterval.razor | 36 + .../Server/Pages/Gridlines/LineInterval.razor | 23 + .../Pages/Gridlines/SnapLineStyle.razor | 38 + .../Server/Pages/Gridlines/SnapToLines.razor | 28 + .../Server/Pages/Gridlines/SnapToObject.razor | 38 + .../Server/Pages/Group/AddChildMethod.razor | 86 ++ .../Pages/Group/AddGroupAtRunTime.razor | 60 ++ .../Server/Pages/Group/CloneNodeGroup.razor | 80 ++ Diagram/Server/Pages/Group/CreateGroup.razor | 82 ++ Diagram/Server/Pages/Group/UnGroup.razor | 66 ++ .../Pages/Group/UpdatePositionForGroup.razor | 63 ++ Diagram/Server/Pages/Index.razor | 56 + .../Interaction/CloneSelectedItems.razor | 204 ++++ .../Pages/Interaction/CurrentSelection.razor | 82 ++ .../Interaction/DiagramConnectionEvent.razor | 74 ++ .../Interaction/DiagramHighlighter.razor | 101 ++ .../Interaction/DiagramPositionEvent.razor | 34 + .../Interaction/DiagramRotateEvent.razor | 37 + .../Interaction/DiagramSelectionEvent.razor | 34 + .../Pages/Interaction/DiagramSizeEvent.razor | 35 + .../Server/Pages/Interaction/MouseClick.razor | 34 + .../Interaction/RubberBandSelectionMode.razor | 92 ++ .../Pages/Interaction/SegmentEditing.razor | 62 ++ .../Pages/Interaction/SelectedElements.razor | 47 + .../Pages/Interaction/UnSelectSample.razor | 27 + Diagram/Server/Pages/Layout/BasicLayout.razor | 61 ++ .../Layout/ComplexHierarchicalTree.razor | 64 ++ .../Server/Pages/Layout/DataLoadedEvent.razor | 88 ++ .../FlowchartLayout/CustomYesOrNoBranch.razor | 150 +++ .../FlowchartLayout/FlowchartLayout.razor | 180 ++++ .../FlowchartLayoutForGmail.razor | 119 +++ .../FlowchartLayoutSettings.razor | 357 +++++++ .../Pages/Layout/HeirarchicalLayout.razor | 63 ++ .../HierarchicalTreeWithDataSource.razor | 70 ++ .../Pages/Layout/LineDistribution.razor | 61 ++ .../Layout/LinearArrangementLinear.razor | 61 ++ .../Layout/LinearArrangementNonLinear.razor | 61 ++ .../Layout/MindMapWithoutDataSource.razor | 234 +++++ .../Pages/Layout/MindmapOrientation.razor | 111 ++ .../Layout/MindmapOrientationRuntime.razor | 125 +++ .../Server/Pages/Layout/MindmapSample1.razor | 60 ++ .../Server/Pages/Layout/MindmapSample2.razor | 77 ++ .../Pages/Layout/OrganizationLayout1.razor | 83 ++ .../Pages/Layout/OrganizationLayout2.razor | 68 ++ .../Layout/RadialTreeWithDataSource.razor | 141 +++ .../Pages/Layout/RadialTreeWithNodes.razor | 106 ++ .../Pages/MermaidSupport/MermaidSupport.razor | 279 +++++ .../Pages/Methods/AddDiagramElements.razor | 95 ++ Diagram/Server/Pages/Methods/AddMethod.razor | 33 + .../Pages/Methods/BeginAndEndUpdate.razor | 76 ++ .../Server/Pages/Methods/ChunkMessage.razor | 38 + Diagram/Server/Pages/Methods/Clear.razor | 63 ++ .../Server/Pages/Methods/ClearSelection.razor | 86 ++ .../Server/Pages/Methods/CloneMethod.razor | 86 ++ Diagram/Server/Pages/Methods/Delete.razor | 99 ++ .../Pages/Methods/GetCustomCursor.razor | 86 ++ .../Server/Pages/Methods/GetCustomTool.razor | 197 ++++ .../Pages/Methods/GetObjectMethod.razor | 87 ++ .../Server/Pages/Methods/GetPageBounds.razor | 86 ++ Diagram/Server/Pages/Methods/GetParent.razor | 43 + .../Pages/Methods/RefereshDataSource.razor | 76 ++ Diagram/Server/Pages/Methods/ResetZoom.razor | 96 ++ .../Server/Pages/Methods/ScaleMethod.razor | 86 ++ .../Pages/Methods/SelectAllMethod.razor | 87 ++ .../Server/Pages/Methods/UnSelectMethod.razor | 86 ++ Diagram/Server/Pages/Methods/ZoomAndPan.razor | 94 ++ .../Pages/Nodes/ActionsofNodes/AddNode.razor | 30 + .../ActionsofNodes/AddNodeAtRuntime.razor | 47 + .../Nodes/ActionsofNodes/CreateNode.razor | 88 ++ .../ActionsofNodes/NodeFromPalette.razor | 68 ++ .../Nodes/ActionsofNodes/RemoveNode.razor | 38 + .../Nodes/ActionsofNodes/UpdateNode.razor | 41 + .../Nodes/Appearance/BackgroundColor.razor | 31 + .../Pages/Nodes/Appearance/BorderColor.razor | 37 + .../Pages/Nodes/Appearance/BorderWidth.razor | 37 + .../Nodes/Appearance/CanAutoLayout.razor | 69 ++ .../Nodes/Appearance/CustomProperty.razor | 32 + .../Pages/Nodes/Appearance/CustomShadow.razor | 37 + .../Pages/Nodes/Appearance/DataProperty.razor | 78 ++ .../Nodes/Appearance/InedgesOutedges.razor | 52 + .../Appearance/LinearGradientStyle.razor | 45 + .../Nodes/Appearance/NodeAppearance.razor | 29 + .../Nodes/Appearance/NodeDefaultSample.razor | 46 + .../Pages/Nodes/Appearance/NodeShadow.razor | 29 + .../Pages/Nodes/Appearance/NodeTemplate.razor | 79 ++ .../Nodes/Appearance/PivotProperty.razor | 37 + .../Appearance/RadientGradientStyle.razor | 47 + .../Pages/Nodes/Appearance/SetTemplate.razor | 97 ++ .../Nodes/Appearance/ZIndexProperty.razor | 53 + .../Pages/Nodes/CloneNode/CloneNode.razor | 55 + .../Nodes/Events/CollectionChangeEvent.razor | 34 + .../Pages/Nodes/Events/MouseEnterEvent.razor | 33 + .../Pages/Nodes/Events/MouseHoverEvent.razor | 33 + .../Pages/Nodes/Events/MouseLeaveEvent.razor | 33 + .../Nodes/Events/NodeCreatingEvent.razor | 43 + .../Pages/Nodes/Events/PositionChange.razor | 50 + .../Nodes/Events/PropertyChangedEvent.razor | 33 + .../Pages/Nodes/Events/RotationChange.razor | 49 + .../Pages/Nodes/Events/SelectionChange.razor | 50 + .../Pages/Nodes/Events/SizeChange.razor | 49 + .../Nodes/ExpandAndCollapse/Appearance.razor | 94 ++ .../ExpandAndCollapse/CornerRadius.razor | 93 ++ .../ExpandCollapseIconTemplate.razor | 106 ++ .../ExpandCollapseMargin.razor | 111 ++ .../ExpandCollapsePadding.razor | 111 ++ .../ExpandCollapsewithLayout.razor | 131 +++ .../Pages/Nodes/ExpandAndCollapse/Icon.razor | 91 ++ .../ExpandAndCollapse/IconWithPathShape.razor | 80 ++ .../IsExpandedProperty.razor | 96 ++ .../Server/Pages/Nodes/Interaction/Drag.razor | 40 + .../Pages/Nodes/Interaction/Resize.razor | 40 + .../Pages/Nodes/Interaction/Rotate.razor | 40 + .../Interaction/RotateAngleProperty.razor | 25 + .../Pages/Nodes/Interaction/Select.razor | 48 + .../Pages/Nodes/Position/MinMaxSize.razor | 38 + .../Nodes/Position/NodeRotateAngle.razor | 34 + .../Pages/Nodes/Position/Positioning.razor | 46 + Diagram/Server/Pages/Overview/Overview.razor | 80 ++ .../Pages/Overview/OverviewConstraints.razor | 67 ++ .../PageSettings/BoundaryConstraints.razor | 60 ++ .../Server/Pages/PageSettings/Margin.razor | 14 + .../Pages/PageSettings/MultiplePage.razor | 38 + .../Pages/PageSettings/PageAppearance.razor | 41 + .../Server/Pages/PageSettings/PageBreak.razor | 22 + .../Pages/PageSettings/PageOrientation.razor | 32 + .../ResponsiveWithParentContainer.razor | 26 + .../ActionofPorts/AddMultiplePorts.razor | 43 + .../Pages/Ports/ActionofPorts/AddPort.razor | 43 + .../Ports/ActionofPorts/AddPortsAsync.razor | 40 + .../Ports/ActionofPorts/CreatePorts.razor | 34 + Diagram/Server/Pages/_Host.cshtml | 8 + Diagram/Server/Pages/_Layout.cshtml | 24 + Diagram/Server/Program.cs | 32 + Diagram/Server/Properties/launchSettings.json | 28 + Diagram/Server/Server_NET8.csproj | 15 + Diagram/Server/Server_NET9.csproj | 15 + Diagram/Server/Shared/MainLayout.razor | 17 + Diagram/Server/Shared/MainLayout.razor.css | 70 ++ Diagram/Server/_Imports.razor | 10 + Diagram/Server/appsettings.Development.json | 9 + Diagram/Server/appsettings.json | 9 + .../wwwroot/css/bootstrap/bootstrap.min.css | 7 + .../css/bootstrap/bootstrap.min.css.map | 1 + .../wwwroot/css/open-iconic/FONT-LICENSE | 86 ++ .../wwwroot/css/open-iconic/ICON-LICENSE | 21 + .../Server/wwwroot/css/open-iconic/README.md | 114 ++ .../font/css/open-iconic-bootstrap.min.css | 1 + .../open-iconic/font/fonts/open-iconic.eot | Bin 0 -> 28196 bytes .../open-iconic/font/fonts/open-iconic.otf | Bin 0 -> 20996 bytes .../open-iconic/font/fonts/open-iconic.svg | 543 ++++++++++ .../open-iconic/font/fonts/open-iconic.ttf | Bin 0 -> 28028 bytes .../open-iconic/font/fonts/open-iconic.woff | Bin 0 -> 14984 bytes Diagram/Server/wwwroot/css/site.css | 64 ++ Diagram/Server/wwwroot/favicon.ico | Bin 0 -> 5430 bytes 359 files changed, 22179 insertions(+) create mode 100644 Diagram/Server/App.razor create mode 100644 Diagram/Server/Pages/Accessibility/KeyBoardNavigation.razor create mode 100644 Diagram/Server/Pages/Annotations/AddAnnotationAtRunTime.razor create mode 100644 Diagram/Server/Pages/Annotations/AddAsync.razor create mode 100644 Diagram/Server/Pages/Annotations/AdditionalInfoProperty.razor create mode 100644 Diagram/Server/Pages/Annotations/AlignmentOfConnectorAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/AlignmentOfNodeAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/AnnotationOfNodeAlignText.razor create mode 100644 Diagram/Server/Pages/Annotations/AnnotationStyleAtRunTime.razor create mode 100644 Diagram/Server/Pages/Annotations/AnnotationWithTextOverflow.razor create mode 100644 Diagram/Server/Pages/Annotations/AnnotationWithTextWrapping.razor create mode 100644 Diagram/Server/Pages/Annotations/Appearance.razor create mode 100644 Diagram/Server/Pages/Annotations/CreateAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/DisplacementOfConnectorAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/HyperLinkWithContent.razor create mode 100644 Diagram/Server/Pages/Annotations/HyperLinktoAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/MarginOfNodeAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/MultipleAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/OffsetOfNodeAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/ReadonlyConstraints.razor create mode 100644 Diagram/Server/Pages/Annotations/RemoveAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/RemoveAnnotationUsingRemoveAt.razor create mode 100644 Diagram/Server/Pages/Annotations/RotationAngleProperty.razor create mode 100644 Diagram/Server/Pages/Annotations/RotationReference.razor create mode 100644 Diagram/Server/Pages/Annotations/SegmentAngleOfConnectorAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/SizeOfAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/TemplateSupportforAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/TextChangedEvent.razor create mode 100644 Diagram/Server/Pages/Annotations/UpdateAnnotation.razor create mode 100644 Diagram/Server/Pages/Annotations/UpdateOffsetofConnectorAnnotation.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnActivity/Adhoc.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivity.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivityTask.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnActivity/Call.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnActivity/Compensation.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnActivity/Loop.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnActivity/SubProcessType.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Association.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Message.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Sequence.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnDataObject/BpmnDataObject.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnDataStore/BpmnDataStore.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnEvent/BpmnEventTrigger.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnEvent/BpmnEventType.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/AddChildren.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnGateway/BpmnGateway.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnShape/BpmnShape.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation.razor create mode 100644 Diagram/Server/Pages/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget.razor create mode 100644 Diagram/Server/Pages/Commands/AlignBottom.razor create mode 100644 Diagram/Server/Pages/Commands/AlignCenter.razor create mode 100644 Diagram/Server/Pages/Commands/AlignLeft.razor create mode 100644 Diagram/Server/Pages/Commands/AlignMiddle.razor create mode 100644 Diagram/Server/Pages/Commands/AlignRight.razor create mode 100644 Diagram/Server/Pages/Commands/AlignTop.razor create mode 100644 Diagram/Server/Pages/Commands/BringForward.razor create mode 100644 Diagram/Server/Pages/Commands/BringIntoCenter.razor create mode 100644 Diagram/Server/Pages/Commands/BringIntoView.razor create mode 100644 Diagram/Server/Pages/Commands/BringToFront.razor create mode 100644 Diagram/Server/Pages/Commands/CanZoomIn.razor create mode 100644 Diagram/Server/Pages/Commands/ClipboardCommands.razor create mode 100644 Diagram/Server/Pages/Commands/CustomCommands.razor create mode 100644 Diagram/Server/Pages/Commands/FitToPage.razor create mode 100644 Diagram/Server/Pages/Commands/GroupingCommands.razor create mode 100644 Diagram/Server/Pages/Commands/ModifyExistingCommands.razor create mode 100644 Diagram/Server/Pages/Commands/NudgeCommand.razor create mode 100644 Diagram/Server/Pages/Commands/SendBackward.razor create mode 100644 Diagram/Server/Pages/Commands/SendToBack.razor create mode 100644 Diagram/Server/Pages/Commands/SetDistributeCommands.razor create mode 100644 Diagram/Server/Pages/Commands/SizingCommands.razor create mode 100644 Diagram/Server/Pages/Commands/UndoRedoCommands.razor create mode 100644 Diagram/Server/Pages/Commands/ZoomingCommands.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/AddConnectorAtRuntime.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/AddConnectorThroughConnectorCollection.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/BezierAllowSegmentsReset.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/BezierConnectorMultiSegment.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/BezierControlPointsVisibility.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/BezierSegment1.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/CloneConnector.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/ConnectWithNode.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/ConnectWithPort.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/ConnectorFromPalette.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/RemoveConnectorsAtRunTime.razor create mode 100644 Diagram/Server/Pages/Connectors/Connector/UpdateConnectorAtRunTime.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/Bridging.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/ConnectionPadding.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/Constraints.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/CornerRadius.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/CustomProperty.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/Decorator.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/DecoratorAppearance.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/DecoratorAppearance1.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/MaxSegmentThumb.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/MaxSegmentThumbRuntime.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/Padding.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/SegmentAppearance.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/SourcePaddingAndTargetPadding.razor create mode 100644 Diagram/Server/Pages/Connectors/Customization/ZIndexProperty.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/CollectionChangeEvent.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/ConnectionChangeEvent.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/ConnectorCreating.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/MouseEnterEvent.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/MouseHoverEvent.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/MouseLeaveEvent.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/PositionChangeEvent.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/PropertyChangedEvent.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/SegmentCollectionChangeEvent.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/SelectionChangeEvent.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/SourcePointChanged.razor create mode 100644 Diagram/Server/Pages/Connectors/Events/TargetPointChanged.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/AvoidLineOverlap.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/ClassicLineRouting.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/ConnectorSplitting.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/DefaultRouting.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/Drag.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/EndPointDragging.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/LineRoutingSettings.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/NodeRoutingObstable.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/ObstaclePadding.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/RoutingConstraints.razor create mode 100644 Diagram/Server/Pages/Connectors/Interaction/Select.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/Bezier.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/BezierSegmentShape.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/MultipleSegments.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/Orthogonal.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/OrthogonalSegmentEditing.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/OrthogonalThumbSetting.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/OrthogonalThumbShape.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/SegmentShape.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/Straight.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/StraightSegmentEditing.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/StraightSegmentShape.razor create mode 100644 Diagram/Server/Pages/Connectors/Segments/StraightSegmentShape1.razor create mode 100644 Diagram/Server/Pages/Constraints/AddOperation.razor create mode 100644 Diagram/Server/Pages/Constraints/AnnotationConstraints.razor create mode 100644 Diagram/Server/Pages/Constraints/BoundaryConstraints.razor create mode 100644 Diagram/Server/Pages/Constraints/ConnectorConstraints.razor create mode 100644 Diagram/Server/Pages/Constraints/DiagramConstraints.razor create mode 100644 Diagram/Server/Pages/Constraints/InheritBehaviors.razor create mode 100644 Diagram/Server/Pages/Constraints/NodeConstraints.razor create mode 100644 Diagram/Server/Pages/Constraints/PortConstraints.razor create mode 100644 Diagram/Server/Pages/Constraints/RemoveOperation.razor create mode 100644 Diagram/Server/Pages/Constraints/SelectorConstraints.razor create mode 100644 Diagram/Server/Pages/Constraints/SnapConstraints.razor create mode 100644 Diagram/Server/Pages/Container/ContainerHeaderSample.razor create mode 100644 Diagram/Server/Pages/Container/ContainerNode.razor create mode 100644 Diagram/Server/Pages/Container/ContainerPalette.razor create mode 100644 Diagram/Server/Pages/Container/ContainerSample.razor create mode 100644 Diagram/Server/Pages/ContextMenu/ContextMenuEvents.razor create mode 100644 Diagram/Server/Pages/ContextMenu/ContextMenuItemClickedEvent.razor create mode 100644 Diagram/Server/Pages/ContextMenu/ContextMenuOpenningEvent.razor create mode 100644 Diagram/Server/Pages/ContextMenu/ContextMenuTemplate.razor create mode 100644 Diagram/Server/Pages/ContextMenu/CustomContextMenu.razor create mode 100644 Diagram/Server/Pages/ContextMenu/CustomContextMenuOnly.razor create mode 100644 Diagram/Server/Pages/ContextMenu/DefaultContextMenu.razor create mode 100644 Diagram/Server/Pages/DataBinding/DiagramWithCustomAdaptor.razor create mode 100644 Diagram/Server/Pages/DataBinding/DiagramWithRemoteData.razor create mode 100644 Diagram/Server/Pages/DataBinding/DynamicObj.razor create mode 100644 Diagram/Server/Pages/DataBinding/ExpandoObject.razor create mode 100644 Diagram/Server/Pages/DataBinding/JSONData.razor create mode 100644 Diagram/Server/Pages/DataBinding/LocalData.razor create mode 100644 Diagram/Server/Pages/DataBinding/ODataAdaptor.razor create mode 100644 Diagram/Server/Pages/DataBinding/ODataV4Adaptor.razor create mode 100644 Diagram/Server/Pages/DataBinding/Parent-Child Relationship.razor create mode 100644 Diagram/Server/Pages/DataBinding/RemoteData.razor create mode 100644 Diagram/Server/Pages/DataBinding/URLAdaptor.razor create mode 100644 Diagram/Server/Pages/DataBinding/WebAPIAdaptor.razor create mode 100644 Diagram/Server/Pages/DrawingTools/ConnectorDrawTool.razor create mode 100644 Diagram/Server/Pages/DrawingTools/FreehandDrawTool.razor create mode 100644 Diagram/Server/Pages/DrawingTools/MultipleTools.razor create mode 100644 Diagram/Server/Pages/DrawingTools/NodeDrawTool.razor create mode 100644 Diagram/Server/Pages/DrawingTools/PolygonShapeTool.razor create mode 100644 Diagram/Server/Pages/DrawingTools/PolylineDrawTool.razor create mode 100644 Diagram/Server/Pages/DrawingTools/TextNodeDrawTool.razor create mode 100644 Diagram/Server/Pages/DrawingTools/ToolSelection.razor create mode 100644 Diagram/Server/Pages/Events/ClickEvent.razor create mode 100644 Diagram/Server/Pages/Events/CreatedEvent.razor create mode 100644 Diagram/Server/Pages/Events/DragDrop.razor create mode 100644 Diagram/Server/Pages/Events/DragLeaveEvent.razor create mode 100644 Diagram/Server/Pages/Events/DragStartEvent.razor create mode 100644 Diagram/Server/Pages/Events/DraggingEvent.razor create mode 100644 Diagram/Server/Pages/Events/KeyDownEvent.razor create mode 100644 Diagram/Server/Pages/Events/KeyUpEvent.razor create mode 100644 Diagram/Server/Pages/Events/OnAutoScrollChange.razor create mode 100644 Diagram/Server/Pages/Export/Export.razor create mode 100644 Diagram/Server/Pages/Export/ExportClipBounds.razor create mode 100644 Diagram/Server/Pages/Export/ExportMargin.razor create mode 100644 Diagram/Server/Pages/Export/ExportOption.razor create mode 100644 Diagram/Server/Pages/Export/ExportOrientation.razor create mode 100644 Diagram/Server/Pages/Export/ExportRegion.razor create mode 100644 Diagram/Server/Pages/Export/ExportToPDF.razor create mode 100644 Diagram/Server/Pages/Export/ExportWithPage.razor create mode 100644 Diagram/Server/Pages/Export/ExportWithPageSize.razor create mode 100644 Diagram/Server/Pages/Flip/FlipDirection.razor create mode 100644 Diagram/Server/Pages/Flip/FlipGroup.razor create mode 100644 Diagram/Server/Pages/GettingStarted/GettingStarted.razor create mode 100644 Diagram/Server/Pages/Gridlines/Appearance.razor create mode 100644 Diagram/Server/Pages/Gridlines/CustomGridline.razor create mode 100644 Diagram/Server/Pages/Gridlines/CustomizeGridline.razor create mode 100644 Diagram/Server/Pages/Gridlines/CustomizeSnapInterval.razor create mode 100644 Diagram/Server/Pages/Gridlines/LineInterval.razor create mode 100644 Diagram/Server/Pages/Gridlines/SnapLineStyle.razor create mode 100644 Diagram/Server/Pages/Gridlines/SnapToLines.razor create mode 100644 Diagram/Server/Pages/Gridlines/SnapToObject.razor create mode 100644 Diagram/Server/Pages/Group/AddChildMethod.razor create mode 100644 Diagram/Server/Pages/Group/AddGroupAtRunTime.razor create mode 100644 Diagram/Server/Pages/Group/CloneNodeGroup.razor create mode 100644 Diagram/Server/Pages/Group/CreateGroup.razor create mode 100644 Diagram/Server/Pages/Group/UnGroup.razor create mode 100644 Diagram/Server/Pages/Group/UpdatePositionForGroup.razor create mode 100644 Diagram/Server/Pages/Index.razor create mode 100644 Diagram/Server/Pages/Interaction/CloneSelectedItems.razor create mode 100644 Diagram/Server/Pages/Interaction/CurrentSelection.razor create mode 100644 Diagram/Server/Pages/Interaction/DiagramConnectionEvent.razor create mode 100644 Diagram/Server/Pages/Interaction/DiagramHighlighter.razor create mode 100644 Diagram/Server/Pages/Interaction/DiagramPositionEvent.razor create mode 100644 Diagram/Server/Pages/Interaction/DiagramRotateEvent.razor create mode 100644 Diagram/Server/Pages/Interaction/DiagramSelectionEvent.razor create mode 100644 Diagram/Server/Pages/Interaction/DiagramSizeEvent.razor create mode 100644 Diagram/Server/Pages/Interaction/MouseClick.razor create mode 100644 Diagram/Server/Pages/Interaction/RubberBandSelectionMode.razor create mode 100644 Diagram/Server/Pages/Interaction/SegmentEditing.razor create mode 100644 Diagram/Server/Pages/Interaction/SelectedElements.razor create mode 100644 Diagram/Server/Pages/Interaction/UnSelectSample.razor create mode 100644 Diagram/Server/Pages/Layout/BasicLayout.razor create mode 100644 Diagram/Server/Pages/Layout/ComplexHierarchicalTree.razor create mode 100644 Diagram/Server/Pages/Layout/DataLoadedEvent.razor create mode 100644 Diagram/Server/Pages/Layout/FlowchartLayout/CustomYesOrNoBranch.razor create mode 100644 Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayout.razor create mode 100644 Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutForGmail.razor create mode 100644 Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutSettings.razor create mode 100644 Diagram/Server/Pages/Layout/HeirarchicalLayout.razor create mode 100644 Diagram/Server/Pages/Layout/HierarchicalTreeWithDataSource.razor create mode 100644 Diagram/Server/Pages/Layout/LineDistribution.razor create mode 100644 Diagram/Server/Pages/Layout/LinearArrangementLinear.razor create mode 100644 Diagram/Server/Pages/Layout/LinearArrangementNonLinear.razor create mode 100644 Diagram/Server/Pages/Layout/MindMapWithoutDataSource.razor create mode 100644 Diagram/Server/Pages/Layout/MindmapOrientation.razor create mode 100644 Diagram/Server/Pages/Layout/MindmapOrientationRuntime.razor create mode 100644 Diagram/Server/Pages/Layout/MindmapSample1.razor create mode 100644 Diagram/Server/Pages/Layout/MindmapSample2.razor create mode 100644 Diagram/Server/Pages/Layout/OrganizationLayout1.razor create mode 100644 Diagram/Server/Pages/Layout/OrganizationLayout2.razor create mode 100644 Diagram/Server/Pages/Layout/RadialTreeWithDataSource.razor create mode 100644 Diagram/Server/Pages/Layout/RadialTreeWithNodes.razor create mode 100644 Diagram/Server/Pages/MermaidSupport/MermaidSupport.razor create mode 100644 Diagram/Server/Pages/Methods/AddDiagramElements.razor create mode 100644 Diagram/Server/Pages/Methods/AddMethod.razor create mode 100644 Diagram/Server/Pages/Methods/BeginAndEndUpdate.razor create mode 100644 Diagram/Server/Pages/Methods/ChunkMessage.razor create mode 100644 Diagram/Server/Pages/Methods/Clear.razor create mode 100644 Diagram/Server/Pages/Methods/ClearSelection.razor create mode 100644 Diagram/Server/Pages/Methods/CloneMethod.razor create mode 100644 Diagram/Server/Pages/Methods/Delete.razor create mode 100644 Diagram/Server/Pages/Methods/GetCustomCursor.razor create mode 100644 Diagram/Server/Pages/Methods/GetCustomTool.razor create mode 100644 Diagram/Server/Pages/Methods/GetObjectMethod.razor create mode 100644 Diagram/Server/Pages/Methods/GetPageBounds.razor create mode 100644 Diagram/Server/Pages/Methods/GetParent.razor create mode 100644 Diagram/Server/Pages/Methods/RefereshDataSource.razor create mode 100644 Diagram/Server/Pages/Methods/ResetZoom.razor create mode 100644 Diagram/Server/Pages/Methods/ScaleMethod.razor create mode 100644 Diagram/Server/Pages/Methods/SelectAllMethod.razor create mode 100644 Diagram/Server/Pages/Methods/UnSelectMethod.razor create mode 100644 Diagram/Server/Pages/Methods/ZoomAndPan.razor create mode 100644 Diagram/Server/Pages/Nodes/ActionsofNodes/AddNode.razor create mode 100644 Diagram/Server/Pages/Nodes/ActionsofNodes/AddNodeAtRuntime.razor create mode 100644 Diagram/Server/Pages/Nodes/ActionsofNodes/CreateNode.razor create mode 100644 Diagram/Server/Pages/Nodes/ActionsofNodes/NodeFromPalette.razor create mode 100644 Diagram/Server/Pages/Nodes/ActionsofNodes/RemoveNode.razor create mode 100644 Diagram/Server/Pages/Nodes/ActionsofNodes/UpdateNode.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/BackgroundColor.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/BorderColor.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/BorderWidth.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/CanAutoLayout.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/CustomProperty.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/CustomShadow.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/DataProperty.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/InedgesOutedges.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/LinearGradientStyle.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/NodeAppearance.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/NodeDefaultSample.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/NodeShadow.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/NodeTemplate.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/PivotProperty.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/RadientGradientStyle.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/SetTemplate.razor create mode 100644 Diagram/Server/Pages/Nodes/Appearance/ZIndexProperty.razor create mode 100644 Diagram/Server/Pages/Nodes/CloneNode/CloneNode.razor create mode 100644 Diagram/Server/Pages/Nodes/Events/CollectionChangeEvent.razor create mode 100644 Diagram/Server/Pages/Nodes/Events/MouseEnterEvent.razor create mode 100644 Diagram/Server/Pages/Nodes/Events/MouseHoverEvent.razor create mode 100644 Diagram/Server/Pages/Nodes/Events/MouseLeaveEvent.razor create mode 100644 Diagram/Server/Pages/Nodes/Events/NodeCreatingEvent.razor create mode 100644 Diagram/Server/Pages/Nodes/Events/PositionChange.razor create mode 100644 Diagram/Server/Pages/Nodes/Events/PropertyChangedEvent.razor create mode 100644 Diagram/Server/Pages/Nodes/Events/RotationChange.razor create mode 100644 Diagram/Server/Pages/Nodes/Events/SelectionChange.razor create mode 100644 Diagram/Server/Pages/Nodes/Events/SizeChange.razor create mode 100644 Diagram/Server/Pages/Nodes/ExpandAndCollapse/Appearance.razor create mode 100644 Diagram/Server/Pages/Nodes/ExpandAndCollapse/CornerRadius.razor create mode 100644 Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate.razor create mode 100644 Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapseMargin.razor create mode 100644 Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapsePadding.razor create mode 100644 Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapsewithLayout.razor create mode 100644 Diagram/Server/Pages/Nodes/ExpandAndCollapse/Icon.razor create mode 100644 Diagram/Server/Pages/Nodes/ExpandAndCollapse/IconWithPathShape.razor create mode 100644 Diagram/Server/Pages/Nodes/ExpandAndCollapse/IsExpandedProperty.razor create mode 100644 Diagram/Server/Pages/Nodes/Interaction/Drag.razor create mode 100644 Diagram/Server/Pages/Nodes/Interaction/Resize.razor create mode 100644 Diagram/Server/Pages/Nodes/Interaction/Rotate.razor create mode 100644 Diagram/Server/Pages/Nodes/Interaction/RotateAngleProperty.razor create mode 100644 Diagram/Server/Pages/Nodes/Interaction/Select.razor create mode 100644 Diagram/Server/Pages/Nodes/Position/MinMaxSize.razor create mode 100644 Diagram/Server/Pages/Nodes/Position/NodeRotateAngle.razor create mode 100644 Diagram/Server/Pages/Nodes/Position/Positioning.razor create mode 100644 Diagram/Server/Pages/Overview/Overview.razor create mode 100644 Diagram/Server/Pages/Overview/OverviewConstraints.razor create mode 100644 Diagram/Server/Pages/PageSettings/BoundaryConstraints.razor create mode 100644 Diagram/Server/Pages/PageSettings/Margin.razor create mode 100644 Diagram/Server/Pages/PageSettings/MultiplePage.razor create mode 100644 Diagram/Server/Pages/PageSettings/PageAppearance.razor create mode 100644 Diagram/Server/Pages/PageSettings/PageBreak.razor create mode 100644 Diagram/Server/Pages/PageSettings/PageOrientation.razor create mode 100644 Diagram/Server/Pages/PageSettings/ResponsiveWithParentContainer.razor create mode 100644 Diagram/Server/Pages/Ports/ActionofPorts/AddMultiplePorts.razor create mode 100644 Diagram/Server/Pages/Ports/ActionofPorts/AddPort.razor create mode 100644 Diagram/Server/Pages/Ports/ActionofPorts/AddPortsAsync.razor create mode 100644 Diagram/Server/Pages/Ports/ActionofPorts/CreatePorts.razor create mode 100644 Diagram/Server/Pages/_Host.cshtml create mode 100644 Diagram/Server/Pages/_Layout.cshtml create mode 100644 Diagram/Server/Program.cs create mode 100644 Diagram/Server/Properties/launchSettings.json create mode 100644 Diagram/Server/Server_NET8.csproj create mode 100644 Diagram/Server/Server_NET9.csproj create mode 100644 Diagram/Server/Shared/MainLayout.razor create mode 100644 Diagram/Server/Shared/MainLayout.razor.css create mode 100644 Diagram/Server/_Imports.razor create mode 100644 Diagram/Server/appsettings.Development.json create mode 100644 Diagram/Server/appsettings.json create mode 100644 Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css create mode 100644 Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css.map create mode 100644 Diagram/Server/wwwroot/css/open-iconic/FONT-LICENSE create mode 100644 Diagram/Server/wwwroot/css/open-iconic/ICON-LICENSE create mode 100644 Diagram/Server/wwwroot/css/open-iconic/README.md create mode 100644 Diagram/Server/wwwroot/css/open-iconic/font/css/open-iconic-bootstrap.min.css create mode 100644 Diagram/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.eot create mode 100644 Diagram/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.otf create mode 100644 Diagram/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.svg create mode 100644 Diagram/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf create mode 100644 Diagram/Server/wwwroot/css/open-iconic/font/fonts/open-iconic.woff create mode 100644 Diagram/Server/wwwroot/css/site.css create mode 100644 Diagram/Server/wwwroot/favicon.ico diff --git a/Diagram/Server/App.razor b/Diagram/Server/App.razor new file mode 100644 index 0000000..7f607dd --- /dev/null +++ b/Diagram/Server/App.razor @@ -0,0 +1,13 @@ +@namespace AlignBottom + + + + + + + Not found + +

Sorry, there's nothing at this address.

+ + + diff --git a/Diagram/Server/Pages/Accessibility/KeyBoardNavigation.razor b/Diagram/Server/Pages/Accessibility/KeyBoardNavigation.razor new file mode 100644 index 0000000..a975b9e --- /dev/null +++ b/Diagram/Server/Pages/Accessibility/KeyBoardNavigation.razor @@ -0,0 +1,987 @@ +@page "/KeyBoardNavigation" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using System.Collections.ObjectModel + + +@*Hidden:Lines*@ + +@implements IDisposable +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.DropDowns +@*End:Hidden*@ +@using shapes = Syncfusion.Blazor.Diagram.NodeShapes +@using SymbolExpandMode = Syncfusion.Blazor.Navigations.ExpandMode +@using ButtonChangeArgs = Syncfusion.Blazor.Buttons.ChangeEventArgs + + +
+ @*Hidden:Lines*@ + +
+ +
+ @*Hidden:Lines*@ +
+
+
+ @*End:Hidden*@ + @*End:Hidden*@ +
+ + +
+
+ + + + + + + + + +
+ @*Hidden:Lines*@ +
+
+
+
+
+

Built-In Commands

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Command
+ 		+
Gesture
+
Select All Ctrl + A
CutCtrl + X
CopyCtrl + C
PasteCtrl + V
UndoCtrl + Z
RedoCtrl + Y
DeleteDelete
Edit AnnotationF2
CancelEsc
NudgeUpArrowUp
NudgeRightArrowRight
NudgeDownArrowDown
NudgeLeftArrowLeft
PrintCtrl+P
ZoomInCtrl++
ZoomOutCtrl+-
GroupCtrl+G
UnGroupCtrl+Shift+U
PointerToolCtrl+1
TextToolCtrl+2
ConnectorToolCtrl+3
FreeFormToolCtrl+5
LineToolCtrl+6
RectangleToolCtrl+8
EllipseToolCtrl+9
IncreaseAnnotationSizeCtrl+Shift+(GreaterThan)
DecreaseAnnotationSizeCtrl+Shift+(LessThan)
Select the diagram elementTAB
Select the diagram element that has been previously selectedShift+TAB
Perform annotation editing for the selected elementEnter
Perform annotation editing for the selected elementEnter
AlignTextLeftCtrl+Shift+L
AlignTextRightCtrl+Shift+R
AlignTextCenterCtrl+Shift+C
JustifyTextCtrl+Shift+J
AlignTextTopCtrl+Shift+E
CenterTextVerticallyCtrl+Shift+M
AlignTextBottomCtrl+Shift+V
RotateLeftCtrl+L
RotateRightCtrl+R
HorizontalFlipCtrl+H
VerticalFlipCtrl+J
BoldCtrl+B
ItalicCtrl+I
UnderlineCtrl+U
BringToFrontCtrl+Shift+F
SendToBackCtrl+Shift+B
SendBackwardCtrl+[
BringForwardCtrl+]
DuplicateShapeCtrl+D
+
+
+ +
+
+ @*End:Hidden*@ +
+ +@code{ + private int connectorCount = 0; + DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings(); + public DiagramSize SymbolPreview; + public SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + public SfDiagramComponent Diagram; + public SfSymbolPaletteComponent PaletteInstance; + + DiagramObjectCollection handles = new DiagramObjectCollection(); + //Defines Diagram's nodes collection + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + + //Defines Diagram's connectors collection + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + + //Define palettes collection + private DiagramObjectCollection palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection + private DiagramObjectCollection flowShapeSymbols = new DiagramObjectCollection(); + + // Defines interval values for GridLines + public double[] GridLineIntervals { get; set; } + + // Defines palette's connector collection + private DiagramObjectCollection connectorSymbols = new DiagramObjectCollection(); + [Inject] + protected IJSRuntime jsRuntime { get; set; } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + if (firstRender) + { + UpdateHandle(); + } + PaletteInstance.Targets = new DiagramObjectCollection + { + Diagram + }; + } + + private void DragDropEvent(DropEventArgs args) + { + if (args.Element is Node node && node.Tooltip != null) + { + node.Tooltip = null; + node.Constraints &= ~NodeConstraints.Tooltip; + } + else if (args.Element is Connector connector && connector.Tooltip != null) + { + connector.Tooltip = null; + connector.Constraints &= ~ConnectorConstraints.Tooltip; + } + } + private void OnSelectionChanged(Syncfusion.Blazor.Diagram.SelectionChangedEventArgs args) + { + if (args.NewValue.Count>0 && args.NewValue[0] is Node) + { + Diagram.SelectionSettings.Constraints = Diagram.SelectionSettings.Constraints | SelectorConstraints.UserHandle; + } + else if(args.NewValue.Count>0) + { + Diagram.SelectionSettings.Constraints = Diagram.SelectionSettings.Constraints & ~SelectorConstraints.UserHandle; + } + } + + private void OnCreated() + { + Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }); + FitOptions options = new FitOptions() { Mode = FitMode.Both, Region = DiagramRegion.Content }; + + + } + + // Method to customize the tool + public InteractionControllerBase GetCustomTool(DiagramElementAction action, string id) + { + InteractionControllerBase tool = null; + if (id == "Draw") + { + tool = new DrawTool(Diagram); + } + else + { + tool = new AddDeleteTool(Diagram); + } + return tool; + } + // Custom tool to delete the node. + public class AddDeleteTool : InteractionControllerBase + { + SfDiagramComponent sfDiagram; + Node deleteObject = null; + public AddDeleteTool(SfDiagramComponent Diagram) : base(Diagram) + { + sfDiagram = Diagram; + } + public override void OnMouseDown(DiagramMouseEventArgs args) + { + if (sfDiagram.SelectionSettings.Nodes.Count>0 && ((sfDiagram.SelectionSettings.Nodes[0]) is Node)) + { + deleteObject = (sfDiagram.SelectionSettings.Nodes[0]) as Node; + } + base.OnMouseDown(args); + } + public override void OnMouseUp(DiagramMouseEventArgs args) + { + if (deleteObject != null) + { + sfDiagram.StartGroupAction(); + sfDiagram.BeginUpdate(); + sfDiagram.Nodes.Remove(deleteObject); + _ = sfDiagram.EndUpdateAsync(); + sfDiagram.EndGroupAction(); + } + base.OnMouseUp(args); + this.InAction = true; + } + + } + + public class DrawTool : ConnectorDrawingController + { + SfDiagramComponent sfDiagram; + Connector newConnector = null; + public DrawTool(SfDiagramComponent Diagram):base(Diagram, DiagramElementAction.ConnectorSourceEnd) + { + sfDiagram = Diagram; + newConnector = new Connector() + { + ID = "OrthogonalConnector", + SourceID = sfDiagram.SelectionSettings.Nodes[0].ID, + Type = ConnectorSegmentType.Orthogonal, + }; + @*Hidden:Lines*@ + #pragma warning disable BL0005 + @*End:Hidden*@ + Diagram.InteractionController = DiagramInteractions.DrawOnce; + Diagram.DrawingObject = newConnector; + @*Hidden:Lines*@ + #pragma warning restore BL0005 + @*End:Hidden*@ + } + public override void OnMouseDown(DiagramMouseEventArgs args) + { + base.OnMouseDown(args); + } + public override void OnMouseUp(DiagramMouseEventArgs args) + { + base.OnMouseUp(args); + } + } + + protected override void OnInitialized() + { + + GridLineIntervals = new double[] { + 1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75 + }; + InitDiagramModel(); + InitPaletteModel(); + + } + // Create Nodes and Connectors for the diagram. + private void InitDiagramModel() + { + CreateNode("node1", 300, 80, NodeFlowShapes.Terminator, "Place order"); + CreateNode("node2", 300, 160, NodeFlowShapes.Process, "Start transaction"); + CreateNode("node3", 300, 240, NodeFlowShapes.Process, "Verification"); + CreateNode("node4", 300, 330, NodeFlowShapes.Decision, "Credit card valid?"); + CreateNode("node5", 300, 430, NodeFlowShapes.Decision, "Funds available?"); + CreateNode("node6", 530, 330, NodeFlowShapes.Process, "Enter payment method"); + CreateNode("node7", 300, 530, NodeFlowShapes.Process, "Complete transaction"); + CreateNode("node8", 110, 530, NodeFlowShapes.Data, "Send e-mail"); + CreateNode("node9", 475, 530, NodeFlowShapes.DirectData, "Customer \n database"); + CreateNode("node10", 300, 630, NodeFlowShapes.Terminator, "Log transaction"); + CreateNode("node11", 480, 630, NodeFlowShapes.Process, "Reconcile the entries"); + CreateConnector("node1", "node2"); + CreateConnector("node2", "node3"); + CreateConnector("node3", "node4"); + CreateConnector("node4", "node5", "Yes"); + CreateConnector("node4", "node6", "No", false, "port3", "port1"); + CreateConnector("node5", "node6", "No", false, "port3", "port4"); + CreateConnector("node5", "node7", "Yes"); + CreateConnector("node6", "node2", default(string), false, "port2", "port3"); + CreateConnector("node7", "node8"); + CreateConnector("node7", "node9"); + CreateConnector("node7", "node10"); + CreateConnector("node10", "node11", default(string), true); + } + // Create Nodes and Connectors for the Palette. + private void InitPaletteModel() + { + palettes = new DiagramObjectCollection(); + SymbolPreview = new DiagramSize + { + Width = 100, + Height = 100 + }; + flowShapeSymbols = new DiagramObjectCollection(); + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + CreatePaletteNode(NodeFlowShapes.Process, "Process"); + CreatePaletteNode(NodeFlowShapes.Decision, "Decision"); + CreatePaletteNode(NodeFlowShapes.Document, "Document"); + CreatePaletteNode(NodeFlowShapes.PreDefinedProcess, "Pre-Defined Process"); + CreatePaletteNode(NodeFlowShapes.PaperTap, "Punched Tape"); + CreatePaletteNode(NodeFlowShapes.DirectData, "Direct Data"); + CreatePaletteNode(NodeFlowShapes.SequentialData, "Sequential Data"); + CreatePaletteNode(NodeFlowShapes.Sort, "Sort"); + CreatePaletteNode(NodeFlowShapes.MultiDocument, "Multi-Document"); + CreatePaletteNode(NodeFlowShapes.Collate, "Collate"); + CreatePaletteNode(NodeFlowShapes.SummingJunction, "Summing Junction"); + CreatePaletteNode(NodeFlowShapes.Or, "OR"); + CreatePaletteNode(NodeFlowShapes.InternalStorage, "Internal Storage"); + CreatePaletteNode(NodeFlowShapes.Extract, "Extract"); + CreatePaletteNode(NodeFlowShapes.SequentialAccessStorage, "Sequential Access Storage"); + CreatePaletteNode(NodeFlowShapes.Annotation, "Annotation"); + CreatePaletteNode(NodeFlowShapes.Data, "Data"); + CreatePaletteNode(NodeFlowShapes.Card, "Card"); + CreatePaletteNode(NodeFlowShapes.Delay, "Delay"); + + connectorSymbols = new DiagramObjectCollection(); + CreatePaletteConnector("Orthogonal With Arrow", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow); + CreatePaletteConnector("Orthogonal", ConnectorSegmentType.Orthogonal, DecoratorShape.None); + CreatePaletteConnector("Straight With Arrow", ConnectorSegmentType.Straight, DecoratorShape.Arrow); + CreatePaletteConnector("Straight", ConnectorSegmentType.Straight, DecoratorShape.None); + CreatePaletteConnector("Bezier", ConnectorSegmentType.Bezier, DecoratorShape.None); + + palettes = new DiagramObjectCollection() + { + @*Hidden:Lines*@ + #pragma warning disable BL0005 + @*End:Hidden*@ + new Palette() {Symbols = flowShapeSymbols, Title = "Flow Shapes", ID = "Flow Shapes", IconCss = "e-ddb-icons e-flow"}, + new Palette() {Symbols = connectorSymbols, Title = "Connectors", IsExpanded = true, IconCss = "e-ddb-icons e-connector"}, + @*Hidden:Lines*@ + #pragma warning restore BL0005 + @*End:Hidden*@ + }; + } + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Style.Fill = "#357BD2"; + if (!(node.ID.StartsWith("Annotation") || node.ID.StartsWith("Sequential Data"))) + node.Style.StrokeColor = "White"; + node.Style.Opacity = 1; + } + private void OnConnectorCreating(IDiagramObject obj) + { + Connector connector = obj as Connector; + connector.Style.Fill = "black"; + connector.Style.StrokeColor = "black"; + connector.Style.Opacity = 1; + connector.TargetDecorator.Style.Fill = "black"; + connector.TargetDecorator.Style.StrokeColor = "black"; + } + // Method is used to create a node for the palette. + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + string NodeID = id; + bool isSpace = id.Contains(" "); + if (isSpace) + { + NodeID = id.Replace(" ", ""); + } + Node diagramNode = new Node() + { + ID = NodeID, + Shape = new FlowShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { StrokeColor = "#757575", StrokeWidth = 1 }, + }; + if (isSpace) + { + diagramNode.Tooltip = new DiagramTooltip() + { + Content = id, + }; + diagramNode.Constraints = NodeConstraints.Default | NodeConstraints.Tooltip; + } + if (id == "Terminator" ||id == "Process") + { + diagramNode.Width = 80; + diagramNode.Height = 40; + } + else if (id == "Decision"|| id == "Document" || id == "PreDefined Process" || + id == "Punched Tape" || id == "Direct Data" || id == "MultiDocument" || id == "Data") + { + diagramNode.Width = 50; + diagramNode.Height = 40; + } + else + { + diagramNode.Width = 50; + diagramNode.Height = 50; + } + double oldWidth = Convert.ToDouble(diagramNode.Width); + double oldHeight = Convert.ToDouble(diagramNode.Height); + double ratio = 100 / oldWidth; + diagramNode.Width = 100; + diagramNode.Height *= ratio; + flowShapeSymbols.Add(diagramNode); + } + + // used to create a Port. + private DiagramObjectCollection CreatePort() + { + DiagramObjectCollection defaultsPorts = new DiagramObjectCollection(); + PointPort port1 = new PointPort() + { + ID = "port1", + Shape = PortShapes.Circle, + Offset = new DiagramPoint() { X = 0, Y = 0.5} + }; + PointPort port2 = new PointPort() + { + ID = "port2", + Shape = PortShapes.Circle, + Offset = new DiagramPoint() { X = 0.5, Y = 0 } + }; + PointPort port3 = new PointPort() + { + ID = "port3", + Shape = PortShapes.Circle, + Offset = new DiagramPoint() { X = 1, Y = 0.5 } + }; + PointPort port4 = new PointPort() + { + ID = "port4", + Shape = PortShapes.Circle, + Offset = new DiagramPoint() { X = 0.5, Y = 1 } + }; + defaultsPorts.Add(port1); + defaultsPorts.Add(port2); + defaultsPorts.Add(port3); + defaultsPorts.Add(port4); + return defaultsPorts; + } + // Method is used to create a Connector for the diagram. + private void CreateConnector(string sourceId, string targetId, string label = default(string), bool isDashLine = false, string sport = "", string tport = "") + { + Connector diagramConnector = new Connector() + { + ID = string.Format("connector{0}", ++connectorCount), + SourceID = sourceId, + TargetID = targetId, + SourcePortID = sport, + TargetPortID = tport + }; + if (isDashLine) + { + diagramConnector.Style = new ShapeStyle() { StrokeDashArray = "2,2" }; + } + if (label != default(string)) + { + var annotation = new PathAnnotation() + { + Content = label, + Style = new TextStyle() { Fill = "white" } + }; + if ((sourceId == "node5" && targetId == "node6") || label == "Yes" || label == "No") + { + annotation.Height = 10; + annotation.Width = 15; + } + diagramConnector.Annotations = new DiagramObjectCollection() { annotation }; + } + diagramConnector.Type = ConnectorSegmentType.Orthogonal; + + connectors.Add(diagramConnector); + } + // Method is used to create a node for the diagram. + private void CreateNode(string id, double x, double y, NodeFlowShapes shape, string label) + { + Node diagramNode = new Node() + { + ID = id, + OffsetX = x, + OffsetY = y, + Width = 145, + Ports = CreatePort(), + Height = 60, + Style = new ShapeStyle { Fill = "#357BD2", StrokeColor = "White" }, + + Shape = new FlowShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Flow, Shape = shape }, + Annotations = new DiagramObjectCollection + { + new ShapeAnnotation + { + Content = label, + Style = new TextStyle() + { + Color="White", Fill = "transparent" + } + } + } + }; + nodes.Add(diagramNode); + } + // Method is used to create a Connector for the palette. + private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape) + { + string connectorID = id; + bool isSpace = id.Contains(" "); + if (isSpace) + { + connectorID = id.Replace(" ", ""); + } + Connector diagramConnector = new Connector() + { + ID = connectorID, + Type = type, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575" }, + TargetDecorator = new DecoratorSettings() + { + Shape = decoratorShape, + Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575", Fill = "#757575" } + } + }; + if (isSpace) + { + diagramConnector.Tooltip = new DiagramTooltip() + { + Content = id, + }; + diagramConnector.Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip; + } + connectorSymbols.Add(diagramConnector); + } + private void UpdateHandle() + { + UserHandle deleteHandle = AddHandle("Delete", "delete", Direction.Bottom, 0.5); + UserHandle drawHandle = AddHandle("Draw", "draw", Direction.Right,0.5); + handles.Add(deleteHandle); + handles.Add(drawHandle); + selectionSettings.UserHandles = handles; + } + + private UserHandle AddHandle(string name, string path, Direction direction, double offset) + { + UserHandle handle = new UserHandle() + { + Name = name, + Visible = true, + Offset = offset, + Side = direction, + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 } + }; + if (path == "delete") + { + handle.PathData = "M0.54700077,2.2130003 L7.2129992,2.2130003 7.2129992,8.8800011 C7.2129992,9.1920013 7.1049975,9.4570007 6.8879985,9.6739998 6.6709994,9.8910007 6.406,10 6.0939997,10 L1.6659999,10 C1.3539997,10 1.0890004,9.8910007 0.87200136,9.6739998 0.65500242,9.4570007 0.54700071,9.1920013 0.54700077,8.8800011 z M2.4999992,0 L5.2600006,0 5.8329986,0.54600048 7.7599996,0.54600048 7.7599996,1.6660004 0,1.6660004 0,0.54600048 1.9270014,0.54600048 z"; + } + else + { + handle.PathData = "M3.9730001,0 L8.9730001,5.0000007 3.9730001,10.000001 3.9730001,7.0090005 0,7.0090005 0,2.9910006 3.9730001,2.9910006 z"; + } + return handle; + } + public async Task ShowHideSymbolPalette() + { + await jsRuntime.InvokeAsync("openPalette"); + + } + + @*Hidden:Lines*@ +public void Dispose() +{ + if (SymbolPreview != null) + { + SymbolPreview = null; + } + if (SymbolMargin != null) + { + SymbolMargin = null; + } + Diagram = null; + PaletteInstance = null; + if (nodes != null) + { + nodes.Clear(); + nodes = null; + } + if (connectors != null) + { + connectors.Clear(); + connectors = null; + } +#pragma warning disable BL0005 + if (palettes != null) + { + for (int i = 0; i < palettes.Count; i++) + { + palettes[i].ID = null; + palettes[i].Title = null; + palettes[i].IconCss = null; + if (palettes[i].Symbols != null) + { + for (int j = 0; j < palettes[i].Symbols.Count; j++) + { + palettes[i].Symbols[j] = null; + } + palettes[i].Symbols.Clear(); + palettes[i].Symbols = null; + } + } + palettes.Clear(); + palettes = null; + } +#pragma warning restore BL0005 + if (flowShapeSymbols != null) + { + flowShapeSymbols.Clear(); + flowShapeSymbols = null; + } + if (GridLineIntervals != null) + { + Array.Clear(GridLineIntervals, 0, GridLineIntervals.Length); + GridLineIntervals = null; + } + if (connectorSymbols != null) + { + connectorSymbols.Clear(); + connectorSymbols = null; + } +} +} diff --git a/Diagram/Server/Pages/Annotations/AddAnnotationAtRunTime.razor b/Diagram/Server/Pages/Annotations/AddAnnotationAtRunTime.razor new file mode 100644 index 0000000..322c3c1 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/AddAnnotationAtRunTime.razor @@ -0,0 +1,39 @@ +@page "/AddAnnotationAtRunTime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + // Reference to diagram + SfDiagramComponent diagram; + + // Defines diagram's node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Initialize diagram's node collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } + + // Method to add labels at runtime + public void AddLabel() + { + ShapeAnnotation annotation = new ShapeAnnotation { Content = "Annotation" }; + (diagram.Nodes[0].Annotations as DiagramObjectCollection).Add(annotation); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/AddAsync.razor b/Diagram/Server/Pages/Annotations/AddAsync.razor new file mode 100644 index 0000000..2455b1d --- /dev/null +++ b/Diagram/Server/Pages/Annotations/AddAsync.razor @@ -0,0 +1,40 @@ +@page "/AddAsync" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + // Reference to diagram + SfDiagramComponent diagram; + + // Defines diagram's node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Intialize diagram's node collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } + + // Method to add labels at runtime + public async void AddLabel() + { + ShapeAnnotation annotation = new ShapeAnnotation { Content = "Annotation" }; + await (diagram.Nodes[0].Annotations as DiagramObjectCollection).AddAsync(annotation); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/AdditionalInfoProperty.razor b/Diagram/Server/Pages/Annotations/AdditionalInfoProperty.razor new file mode 100644 index 0000000..b086a6d --- /dev/null +++ b/Diagram/Server/Pages/Annotations/AdditionalInfoProperty.razor @@ -0,0 +1,43 @@ +@page "/AdditionalInfoProperty" + +@using Syncfusion.Blazor.Diagram + +@code +{ + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + + // Create a dictionary to store additional information for the annotation. + Dictionary AnnotationInfo = new Dictionary(); + AnnotationInfo.Add("author", "John Doe"); + AnnotationInfo.Add("modifiedDate", DateTime.Now); + + // A node with an annotation containing additional information. + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Annotated Node", + AdditionalInfo = AnnotationInfo + } + } + }; + + // Add the node to the collection. + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/AlignmentOfConnectorAnnotation.razor b/Diagram/Server/Pages/Annotations/AlignmentOfConnectorAnnotation.razor new file mode 100644 index 0000000..5cbb833 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/AlignmentOfConnectorAnnotation.razor @@ -0,0 +1,39 @@ +@page "/AlignmentOfConnectorAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Defines diagram's connector collection. + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + SourcePoint = new DiagramPoint() { X = 300, Y = 40 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 160 }, + Type = ConnectorSegmentType.Orthogonal, + Style = new TextStyle() { StrokeColor = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + new PathAnnotation + { + Content = "Before", + // Sets the alignment of the annotation as Before. + Alignment = AnnotationAlignment.Before + }, + new PathAnnotation + { + Content = "After", + // Sets the alignment of the annotation as After. + Alignment = AnnotationAlignment.After + }, + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/AlignmentOfNodeAnnotation.razor b/Diagram/Server/Pages/Annotations/AlignmentOfNodeAnnotation.razor new file mode 100644 index 0000000..ca5b638 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/AlignmentOfNodeAnnotation.razor @@ -0,0 +1,36 @@ +@page "/AlignmentOfNodeAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 250, + OffsetY = 250, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Annotation", + // Sets the HorizontalAlignment and VerticalAlignment for the content. + HorizontalAlignment = HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/AnnotationOfNodeAlignText.razor b/Diagram/Server/Pages/Annotations/AnnotationOfNodeAlignText.razor new file mode 100644 index 0000000..2265496 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/AnnotationOfNodeAlignText.razor @@ -0,0 +1,38 @@ +@page "/AnnotationOfNodeAlignText" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Text align is set as Left", + Style = new TextStyle() + { + // Sets the textAlign as left for the content. + TextAlign = TextAlign.Left + } + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/AnnotationStyleAtRunTime.razor b/Diagram/Server/Pages/Annotations/AnnotationStyleAtRunTime.razor new file mode 100644 index 0000000..5ad3a5c --- /dev/null +++ b/Diagram/Server/Pages/Annotations/AnnotationStyleAtRunTime.razor @@ -0,0 +1,60 @@ +@page "/AnnotationStyleAtRunTime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + // Reference of the diagram. + SfDiagramComponent Diagram; + + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Initialize diagram's node collection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + // Sets the annotation for the node. + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Annotation Text", + Style = new TextStyle() + { + Color = "black", + Bold = true, + Italic = true, + TextDecoration = TextDecoration.Underline, + FontSize = 12, + FontFamily = "TimesNewRoman" + } + } + }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + }; + nodes.Add(node); + } + + public void UpdateStyle() + { + // Change the style of the annotation. + Diagram.BeginUpdate(); + Diagram.Nodes[0].Annotations[0].Style.Bold = false; + Diagram.Nodes[0].Annotations[0].Style.TextDecoration = TextDecoration.None; + Diagram.Nodes[0].Annotations[0].Style.Color = "Red"; + _ = Diagram.EndUpdateAsync(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/AnnotationWithTextOverflow.razor b/Diagram/Server/Pages/Annotations/AnnotationWithTextOverflow.razor new file mode 100644 index 0000000..cff9840 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/AnnotationWithTextOverflow.razor @@ -0,0 +1,41 @@ +@page "/AnnotationWithTextOverflow" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Initialize diagram's node collection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + // Sets the style for the text to be displayed. + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "The text element with property of overflow as Wrap and wrapping as NoWrap", + Style = new TextStyle() + { + // Sets the text overflow of the annotation as Wrap. + TextOverflow = TextOverflow.Wrap, + TextWrapping = TextWrap.NoWrap + } + }, + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/AnnotationWithTextWrapping.razor b/Diagram/Server/Pages/Annotations/AnnotationWithTextWrapping.razor new file mode 100644 index 0000000..95b081c --- /dev/null +++ b/Diagram/Server/Pages/Annotations/AnnotationWithTextWrapping.razor @@ -0,0 +1,40 @@ +@page "/AnnotationWithTextWrapping" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Initialize diagram's node collection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + // Sets the annotation for the node. + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Annotation Text Wrapping", + Style = new TextStyle() + { + // Sets the text wrapping of the annotation as Wrap. + TextWrapping = TextWrap.Wrap + } + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/Appearance.razor b/Diagram/Server/Pages/Annotations/Appearance.razor new file mode 100644 index 0000000..73f8d62 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/Appearance.razor @@ -0,0 +1,45 @@ +@page "/Appearance" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Initialize diagram's node collection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + // Sets the annotation for the node. + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Annotation Text", + Style = new TextStyle() + { + // Sets the style for the annotation. + Color="black", + Bold = true, + Italic = true, + TextDecoration = TextDecoration.Underline, + FontSize = 12, + FontFamily = "TimesNewRoman" + } + } + }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/CreateAnnotation.razor b/Diagram/Server/Pages/Annotations/CreateAnnotation.razor new file mode 100644 index 0000000..057f248 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/CreateAnnotation.razor @@ -0,0 +1,47 @@ +@page "/CreateAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's connector collection + DiagramObjectCollection connectors; + + // Defines diagram's node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + Annotations = new DiagramObjectCollection() + { + // A annotation is created and stored in Annotations collection of Node. + new ShapeAnnotation { Content = "Node" } + } + }; + nodes.Add(node); + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + SourcePoint = new DiagramPoint() { X = 300, Y = 40 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 160 }, + Type = ConnectorSegmentType.Orthogonal, + Style = new TextStyle() { StrokeColor = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + // A annotation is created and stored in Annotations collection of Connector. + new PathAnnotation { Content = "Connector" } + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/DisplacementOfConnectorAnnotation.razor b/Diagram/Server/Pages/Annotations/DisplacementOfConnectorAnnotation.razor new file mode 100644 index 0000000..4e7f3d2 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/DisplacementOfConnectorAnnotation.razor @@ -0,0 +1,38 @@ +@page "/DisplacementOfConnectorAnnotation" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Defines diagram's connector collection. + public DiagramObjectCollection connectors { get; set; } + + protected override void OnInitialized() + { + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + SourcePoint = new DiagramPoint() { X = 300, Y = 40 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 160 }, + Type = ConnectorSegmentType.Orthogonal, + Style = new ShapeStyle() + { + StrokeColor = "#6BA5D7" + }, + Annotations = new DiagramObjectCollection() + { + new PathAnnotation() + { + Content = "After", + // Set the displacement to the annotation. + Displacement = new DiagramPoint() { X = 50, Y = 50 }, + Alignment = AnnotationAlignment.After + }, + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/HyperLinkWithContent.razor b/Diagram/Server/Pages/Annotations/HyperLinkWithContent.razor new file mode 100644 index 0000000..4a40482 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/HyperLinkWithContent.razor @@ -0,0 +1,40 @@ +@page "/HyperLinkWithContent" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Initialize diagram's node collection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + // Sets the annotation for the Node. + Annotations = new DiagramObjectCollection() + { + // Add text as hyperlink. + new ShapeAnnotation + { + Hyperlink = new HyperlinkSettings + { + Content = "Syncfusion", + Url = "https://www.syncfusion.com" + } + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/HyperLinktoAnnotation.razor b/Diagram/Server/Pages/Annotations/HyperLinktoAnnotation.razor new file mode 100644 index 0000000..abb2fa4 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/HyperLinktoAnnotation.razor @@ -0,0 +1,39 @@ +@page "/HyperLinktoAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Initialzie diagram's node collection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + // Sets the annotation for the Node. + Annotations = new DiagramObjectCollection() + { + // Add text as hyperlink. + new ShapeAnnotation + { + Hyperlink = new HyperlinkSettings + { + Url = "https://www.syncfusion.com" + } + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/MarginOfNodeAnnotation.razor b/Diagram/Server/Pages/Annotations/MarginOfNodeAnnotation.razor new file mode 100644 index 0000000..b401a89 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/MarginOfNodeAnnotation.razor @@ -0,0 +1,38 @@ +@page "/MarginOfNodeAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Task1", + // Sets the margin for the content. + Margin = new DiagramThickness() { Top = 10}, + HorizontalAlignment = HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Top, + Offset = new DiagramPoint(){ X = 0.5 ,Y = 1} + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/MultipleAnnotation.razor b/Diagram/Server/Pages/Annotations/MultipleAnnotation.razor new file mode 100644 index 0000000..d2e0594 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/MultipleAnnotation.razor @@ -0,0 +1,75 @@ +@page "/MultipleAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + // Defines diagram's connector collection. + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + // Sets the multiple annotation for the node. + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Left", + Offset = new DiagramPoint(){ X = .12,Y = .1} + }, + new ShapeAnnotation + { + Content = "Center", + Offset = new DiagramPoint(){ X = .5,Y = .5} + }, + new ShapeAnnotation + { + Content = "Right", + Offset = new DiagramPoint(){ X = .82,Y = .9} + } + }, + }; + nodes.Add(node); + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + SourcePoint = new DiagramPoint() { X = 300, Y = 40 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 160 }, + Type = ConnectorSegmentType.Orthogonal, + Style = new TextStyle() { StrokeColor = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + new PathAnnotation + { + Content = "Offset as 0", + Offset = 0 + }, + new PathAnnotation + { + Content = "Offset as 0.5", + Offset = 0.5 + }, + new PathAnnotation + { + Content = "Offset as 1", + Offset = 1 + }, + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/OffsetOfNodeAnnotation.razor b/Diagram/Server/Pages/Annotations/OffsetOfNodeAnnotation.razor new file mode 100644 index 0000000..fc9b2e9 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/OffsetOfNodeAnnotation.razor @@ -0,0 +1,34 @@ +@page "/OffsetOfNodeAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Offset(0,0)", + // Sets the offset for an annotation's content. + Offset = new DiagramPoint() { X = 0, Y = 0 } + } + }, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/ReadonlyConstraints.razor b/Diagram/Server/Pages/Annotations/ReadonlyConstraints.razor new file mode 100644 index 0000000..da04183 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/ReadonlyConstraints.razor @@ -0,0 +1,36 @@ +@page "/ReadonlyConstraints" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Initialize diagram's node collection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Annotation Text", + // Sets the constraints as Read only. + Constraints = AnnotationConstraints.ReadOnly + } + }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/RemoveAnnotation.razor b/Diagram/Server/Pages/Annotations/RemoveAnnotation.razor new file mode 100644 index 0000000..0bedc53 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/RemoveAnnotation.razor @@ -0,0 +1,43 @@ +@page "/RemoveAnnotation" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + // Reference to diagram + SfDiagramComponent diagram; + + // Defines diagram's node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + }; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation {ID="label", Content = "Annotation" }, + }; + nodes.Add(node); + } + + // Method to remove labels at runtime using Remove method. + public void RemoveLabel() + { + ShapeAnnotation annotation = (diagram.Nodes[0].Annotations[0]) as ShapeAnnotation; + (diagram.Nodes[0].Annotations as DiagramObjectCollection).Remove(annotation); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/RemoveAnnotationUsingRemoveAt.razor b/Diagram/Server/Pages/Annotations/RemoveAnnotationUsingRemoveAt.razor new file mode 100644 index 0000000..a626548 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/RemoveAnnotationUsingRemoveAt.razor @@ -0,0 +1,42 @@ +@page "/RemoveAnnotationUsingRemoveAt" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + // Reference to diagram + SfDiagramComponent diagram; + + // Defines diagram's node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + }; + node.Annotations = new DiagramObjectCollection() +{ + new ShapeAnnotation {ID="label", Content = "Annotation" }, + }; + nodes.Add(node); + } + + // Method to remove labels at runtime + public void RemoveLabel() + { + (diagram.Nodes[0].Annotations as DiagramObjectCollection).RemoveAt(0); + } +} diff --git a/Diagram/Server/Pages/Annotations/RotationAngleProperty.razor b/Diagram/Server/Pages/Annotations/RotationAngleProperty.razor new file mode 100644 index 0000000..ab2f7c9 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/RotationAngleProperty.razor @@ -0,0 +1,33 @@ +@page "/RotationAngleProperty" + + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Node", + ID = "Annotation", + RotationAngle = 30, + } + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/RotationReference.razor b/Diagram/Server/Pages/Annotations/RotationReference.razor new file mode 100644 index 0000000..afcca4b --- /dev/null +++ b/Diagram/Server/Pages/Annotations/RotationReference.razor @@ -0,0 +1,52 @@ +@page "/RotationReference" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Node1", + RotationReference = AnnotationRotationReference.Parent, + } + }, + + }; + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Node2", + RotationReference = AnnotationRotationReference.Page, + } + }, + + }; + nodes.Add(node1); + nodes.Add(node2); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/SegmentAngleOfConnectorAnnotation.razor b/Diagram/Server/Pages/Annotations/SegmentAngleOfConnectorAnnotation.razor new file mode 100644 index 0000000..c0b806a --- /dev/null +++ b/Diagram/Server/Pages/Annotations/SegmentAngleOfConnectorAnnotation.razor @@ -0,0 +1,34 @@ +@page "/SegmentAngleOfConnectorAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's connector collection. + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + SourcePoint = new DiagramPoint() { X = 300, Y = 40 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 160 }, + Type = ConnectorSegmentType.Orthogonal, + Style = new TextStyle() { StrokeColor = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + new PathAnnotation + { + Content = "Annotation", + // Set the segment angle for the connector's annotation. + SegmentAngle = true, + Offset = 0.7 + }, + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/SizeOfAnnotation.razor b/Diagram/Server/Pages/Annotations/SizeOfAnnotation.razor new file mode 100644 index 0000000..bc65f09 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/SizeOfAnnotation.razor @@ -0,0 +1,35 @@ +@page "/SizeOfAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's connector collection. + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + // Intialize diagram's connector collection + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + SourcePoint = new DiagramPoint() { X = 300, Y = 40 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 160 }, + Type = ConnectorSegmentType.Orthogonal, + Style = new TextStyle() { StrokeColor = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + new PathAnnotation + { + Content = "Annotation length will be varied", + // Sets the size of the annotation. + Width = 50, + Height = 50 + }, + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/TemplateSupportforAnnotation.razor b/Diagram/Server/Pages/Annotations/TemplateSupportforAnnotation.razor new file mode 100644 index 0000000..5b6b986 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/TemplateSupportforAnnotation.razor @@ -0,0 +1,51 @@ +@page "/TemplateSupportforAnnotation" + +@using Syncfusion.Blazor.Diagram + + + + + @if (context is Annotation annotation) + { + if (annotation.ID == "Annotation1") + { + string ID = annotation.ID + "TemplateContent"; +
+
+ Profile Image +
+
Nicolas
+
+ } + } + + + + @code + { + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 300, + OffsetY = 300, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "black", Opacity = 1 }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + ID = "Annotation1", + UseTemplate = true, + Height = 75, + Width = 75, + + }, + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/TextChangedEvent.razor b/Diagram/Server/Pages/Annotations/TextChangedEvent.razor new file mode 100644 index 0000000..e1d9d9d --- /dev/null +++ b/Diagram/Server/Pages/Annotations/TextChangedEvent.razor @@ -0,0 +1,41 @@ +@page "/TextChangedEvent" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's nodes collection. + DiagramObjectCollection nodes; + + // Triggered this event when complete the editing for Annotation and update the old text and new text values. + private void OnTextChanged(TextChangeEventArgs args) + { + Console.WriteLine("OldValue", args.OldValue); + Console.WriteLine("NewValue", args.NewValue); + } + // Triggered when the node and connector's labels change in the diagram. + private void OnLabelTextChanging(TextChangeEventArgs args) + { + args.Cancel = true; + } + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation { Content = "Annotation" } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Annotations/UpdateAnnotation.razor b/Diagram/Server/Pages/Annotations/UpdateAnnotation.razor new file mode 100644 index 0000000..beeb302 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/UpdateAnnotation.razor @@ -0,0 +1,38 @@ +@page "/UpdateAnnotation" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + // Reference to diagram + SfDiagramComponent diagram; + + // Defines diagram's node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } }, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } + + public void UpdateLabel() + { + diagram.Nodes[0].Annotations[0].Content = "Updated Annotation"; + } +} diff --git a/Diagram/Server/Pages/Annotations/UpdateOffsetofConnectorAnnotation.razor b/Diagram/Server/Pages/Annotations/UpdateOffsetofConnectorAnnotation.razor new file mode 100644 index 0000000..d3114b5 --- /dev/null +++ b/Diagram/Server/Pages/Annotations/UpdateOffsetofConnectorAnnotation.razor @@ -0,0 +1,45 @@ +@page "/UpdateOffsetofConnectorAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Defines diagram's connector collection. + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + SourcePoint = new DiagramPoint() { X = 300, Y = 40 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 160 }, + Type = ConnectorSegmentType.Orthogonal, + Style = new TextStyle() { StrokeColor = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + new PathAnnotation + { + Content = "Offset as 0", + // Sets the offset of the annotation as 0. + Offset = 0 + }, + new PathAnnotation + { + Content = "Offset as 0.5", + // Sets the offset of the annotation as 0.5. + Offset = 0.5 + }, + new PathAnnotation + { + Content = "Offset as 1", + // Sets the offset of the annotation as 1. + Offset = 1 + }, + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Adhoc.razor b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Adhoc.razor new file mode 100644 index 0000000..ff02c48 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Adhoc.razor @@ -0,0 +1,34 @@ +@page "/Adhoc" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique id of the node. + ID = "node1", + // Defines shape to activity + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.CollapsedSubProcess, + IsAdhoc = true + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivity.razor b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivity.razor new file mode 100644 index 0000000..0d7eb72 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivity.razor @@ -0,0 +1,33 @@ +@page "/BpmnActivity" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets the shape to activity. + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess.razor b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess.razor new file mode 100644 index 0000000..cfb73c0 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess.razor @@ -0,0 +1,34 @@ +@page "/BpmnActivityCollapsedSubProcess" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets the shape to activity. + Shape = new BpmnActivity() + { + // Sets activity type to CollapsedSubProcess. + ActivityType = BpmnActivityType.CollapsedSubProcess + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivityTask.razor b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivityTask.razor new file mode 100644 index 0000000..2207b97 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/BpmnActivityTask.razor @@ -0,0 +1,35 @@ +@page "/BpmnActivityTask" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets the shape to activity. + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task, + // Sets the type of the task to Send. + TaskType = BpmnTaskType.Send + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Call.razor b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Call.razor new file mode 100644 index 0000000..69c0c34 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Call.razor @@ -0,0 +1,35 @@ +@page "/Call" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Defines the shape to activity. + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task, + // Sets call to true. + IsCall = true, + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Compensation.razor b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Compensation.razor new file mode 100644 index 0000000..7e2cb81 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Compensation.razor @@ -0,0 +1,35 @@ +@page "/Compensation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Defines the shape to activity. + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task, + // Set compensation to true. + IsCompensation = true, + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Loop.razor b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Loop.razor new file mode 100644 index 0000000..6f2bc71 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/Loop.razor @@ -0,0 +1,34 @@ +@page "/Loop" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Defines the shape to activity. + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task, + Loop = BpmnLoopCharacteristic.Standard, + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnActivity/SubProcessType.razor b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/SubProcessType.razor new file mode 100644 index 0000000..eeece41 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnActivity/SubProcessType.razor @@ -0,0 +1,34 @@ +@page "/SubProcessType" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets shape to Activity. + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.CollapsedSubProcess, + SubProcessType = BpmnSubProcessType.Event, + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Association.razor b/Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Association.razor new file mode 100644 index 0000000..8bc3839 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Association.razor @@ -0,0 +1,30 @@ +@page "/Association" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Create connector and store it in the connector collection. + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + // Unique Id of the connector. + ID = "connector1", + // Start and end point of the connector + SourcePoint = new DiagramPoint () { X = 100, Y = 200 }, + TargetPoint = new DiagramPoint () { X = 300, Y = 300 }, + // Sets the type to Bpmn, flow to AssociationFlow. + Shape = new BpmnFlow() + { + Flow = BpmnFlowType.AssociationFlow, + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Message.razor b/Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Message.razor new file mode 100644 index 0000000..02aa5fb --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Message.razor @@ -0,0 +1,30 @@ +@page "/Message" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Create connector and store it in the connector collection. + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + // Unique Id of the connector. + ID = "connector1", + // Start and end point of the connector + SourcePoint = new DiagramPoint () { X = 100, Y = 200 }, + TargetPoint = new DiagramPoint () { X = 300, Y = 300 }, + // Sets the type to Bpmn, flow to AssociationFlow. + Shape = new BpmnFlow() + { + Flow = BpmnFlowType.MessageFlow, + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Sequence.razor b/Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Sequence.razor new file mode 100644 index 0000000..8b0795f --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnConnectors/Sequence.razor @@ -0,0 +1,30 @@ +@page "/Sequence" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Create connector and store it in the connector collection. + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + // Unique Id of the connector. + ID = "connector1", + // Start and end point of the connector + SourcePoint = new DiagramPoint () { X = 100, Y = 200 }, + TargetPoint = new DiagramPoint () { X = 300, Y = 300 }, + // Sets the type to Bpmn, flow to AssociationFlow. + Shape = new BpmnFlow() + { + Flow = BpmnFlowType.SequenceFlow, + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnDataObject/BpmnDataObject.razor b/Diagram/Server/Pages/BpmnEditor/BpmnDataObject/BpmnDataObject.razor new file mode 100644 index 0000000..90c6800 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnDataObject/BpmnDataObject.razor @@ -0,0 +1,34 @@ +@page "/BpmnDataObject" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets shape to DataObject. + Shape = new BpmnDataObject() + { + IsCollectiveData = true, + DataObjectType = BpmnDataObjectType.None + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnDataStore/BpmnDataStore.razor b/Diagram/Server/Pages/BpmnEditor/BpmnDataStore/BpmnDataStore.razor new file mode 100644 index 0000000..ac04841 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnDataStore/BpmnDataStore.razor @@ -0,0 +1,30 @@ +@page "/BpmnDataStore" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets shape to DataStore. + Shape = new BpmnDataStore() + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnEvent/BpmnEventTrigger.razor b/Diagram/Server/Pages/BpmnEditor/BpmnEvent/BpmnEventTrigger.razor new file mode 100644 index 0000000..80e5fe6 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnEvent/BpmnEventTrigger.razor @@ -0,0 +1,35 @@ +@page "/BpmnEventTrigger" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + //Sets type as Bpmn and shape as Event + Shape = new BpmnEvent() + { + // Set the event type to NonInterruptingIntermediate and set the trigger as message. + EventType = BpmnEventType.Start, + Trigger = BpmnEventTrigger.Message + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnEvent/BpmnEventType.razor b/Diagram/Server/Pages/BpmnEditor/BpmnEvent/BpmnEventType.razor new file mode 100644 index 0000000..36e30f3 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnEvent/BpmnEventType.razor @@ -0,0 +1,34 @@ +@page "/BpmnEventType" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + //Sets shape as BpmnEvent. + Shape = new BpmnEvent() + { + // Set the event type as End. + EventType = BpmnEventType.End, + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/AddChildren.razor b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/AddChildren.razor new file mode 100644 index 0000000..6b8912b --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/AddChildren.razor @@ -0,0 +1,40 @@ +@page "/AddChildren" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node1 = new Node() + { + ID = "node1", + OffsetX = 300, + OffsetY = 300, + Width = 70, + Height = 70, + Shape = new BpmnActivity() { ActivityType = BpmnActivityType.Task } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 300, + OffsetX = 500, + OffsetY = 300, + Height = 300, + Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop, + Shape = new BpmnExpandedSubProcess() + { + Children = new DiagramObjectCollection() { "node1" } + } + }; + nodes.Add(node2); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess.razor b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess.razor new file mode 100644 index 0000000..10d850d --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/BpmnExpandedSubProcess.razor @@ -0,0 +1,30 @@ +@page "/BpmnExpandedSubProcess" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 500, + OffsetY = 350, + // Size of the node. + Width = 300, + Height = 300, + // Unique Id of the node. + ID = "node1", + // Sets the shape to activity. + Shape = new BpmnExpandedSubProcess() + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc.razor b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc.razor new file mode 100644 index 0000000..6c06842 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessAdhoc.razor @@ -0,0 +1,33 @@ +@page "/ExpandedSubProcessAdhoc" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique id of the node. + ID = "node1", + // Defines shape to Bpmn ExpandedSubProcess + Shape = new BpmnExpandedSubProcess() + { + IsAdhoc = true, + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation.razor b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation.razor new file mode 100644 index 0000000..53708cf --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessCompensation.razor @@ -0,0 +1,33 @@ +@page "/ExpandedSubProcessCompensation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique id of the node. + ID = "node1", + // Defines the shape to Bpmn ExpandedSubProcess. + Shape = new BpmnExpandedSubProcess() + { + IsCompensation = true, + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop.razor b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop.razor new file mode 100644 index 0000000..bd20ef4 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessLoop.razor @@ -0,0 +1,33 @@ +@page "/ExpandedSubProcessLoop" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Defines the shape to Bpmn ExpandedSubProcess. + Shape = new BpmnExpandedSubProcess() + { + Loop = BpmnLoopCharacteristic.Standard, + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType.razor b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType.razor new file mode 100644 index 0000000..548e1f1 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnExpandedSubProcess/ExpandedSubProcessType.razor @@ -0,0 +1,33 @@ +@page "/ExpandedSubProcessType" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets shape to Bpmn ExpandedSubProcess. + Shape = new BpmnExpandedSubProcess() + { + SubProcessType = BpmnSubProcessType.Event + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnGateway/BpmnGateway.razor b/Diagram/Server/Pages/BpmnEditor/BpmnGateway/BpmnGateway.razor new file mode 100644 index 0000000..86b30e4 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnGateway/BpmnGateway.razor @@ -0,0 +1,33 @@ +@page "/BpmnGateway" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + //Position of the node. + OffsetX = 100, + OffsetY = 100, + //Size of the node. + Width = 100, + Height = 100, + //Unique Id of the node. + ID = "node1", + Shape = new BpmnGateway() + { + //Sets gateway type to None. + GatewayType = BpmnGatewayType.None + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnShape/BpmnShape.razor b/Diagram/Server/Pages/BpmnEditor/BpmnShape/BpmnShape.razor new file mode 100644 index 0000000..9187c40 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnShape/BpmnShape.razor @@ -0,0 +1,33 @@ +@page "/BpmnShape" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets the shape to activity. + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation.razor b/Diagram/Server/Pages/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation.razor new file mode 100644 index 0000000..95b2a43 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnTextAnnotation/BpmnTextAnnotation.razor @@ -0,0 +1,40 @@ +@page "/BpmnTextAnnotation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets type as Bpmn and shape as DataObject + Shape = new BpmnTextAnnotation() + { + TextAnnotationDirection = TextAnnotationDirection.Auto, + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Text", + }, + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget.razor b/Diagram/Server/Pages/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget.razor new file mode 100644 index 0000000..9c157b4 --- /dev/null +++ b/Diagram/Server/Pages/BpmnEditor/BpmnTextAnnotation/TextAnnotationTarget.razor @@ -0,0 +1,58 @@ +@page "/TextAnnotationTarget" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node1 = new Node() + { + // Position of the node. + OffsetX = 500, + OffsetY = 500, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets the type of shape to Bpmn and shape to activity. + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + // Position of the node. + OffsetX = 600, + OffsetY = 350, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node2", + // Sets type as Bpmn and shape as DataObject + Shape = new BpmnTextAnnotation() + { + TextAnnotationDirection = TextAnnotationDirection.Bottom, + TextAnnotationTarget = "node1" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Text", + }, + } + }; + nodes.Add(node2); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/AlignBottom.razor b/Diagram/Server/Pages/Commands/AlignBottom.razor new file mode 100644 index 0000000..6b01ef4 --- /dev/null +++ b/Diagram/Server/Pages/Commands/AlignBottom.razor @@ -0,0 +1,56 @@ +@page "/AlignBottom" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + // Reference to diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 500, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node3); + } + //Method to align all the selected objectes at bottom of selection boundary + private void OnAlignBottom() + { + diagram.SetAlign(AlignmentOptions.Bottom); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/AlignCenter.razor b/Diagram/Server/Pages/Commands/AlignCenter.razor new file mode 100644 index 0000000..9e4e259 --- /dev/null +++ b/Diagram/Server/Pages/Commands/AlignCenter.razor @@ -0,0 +1,55 @@ +@page "/AlignCenter" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + // Reference to diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 500, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node3); + } + // Method to align selected objects at center of the selection boundary. + private void OnAlignCenter() + { + diagram.SetAlign(AlignmentOptions.Center); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/AlignLeft.razor b/Diagram/Server/Pages/Commands/AlignLeft.razor new file mode 100644 index 0000000..b9c2c6f --- /dev/null +++ b/Diagram/Server/Pages/Commands/AlignLeft.razor @@ -0,0 +1,56 @@ +@page "/AlignLeft" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 500, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node3); + } + //Method to align selected objects at left of the selection boundary. + private void OnAlignLeft() + { + diagram.SetAlign(AlignmentOptions.Left); + } +} diff --git a/Diagram/Server/Pages/Commands/AlignMiddle.razor b/Diagram/Server/Pages/Commands/AlignMiddle.razor new file mode 100644 index 0000000..3641343 --- /dev/null +++ b/Diagram/Server/Pages/Commands/AlignMiddle.razor @@ -0,0 +1,55 @@ +@page "/AlignMiddle" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 500, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node3); + } + //Method to align selected objects at the middle of selection boundary. + private void OnAlignMiddle() + { + diagram.SetAlign(AlignmentOptions.Middle); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/AlignRight.razor b/Diagram/Server/Pages/Commands/AlignRight.razor new file mode 100644 index 0000000..2f936a5 --- /dev/null +++ b/Diagram/Server/Pages/Commands/AlignRight.razor @@ -0,0 +1,54 @@ +@page "/AlignRight" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 500, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node3); + } + //Method to align selected objects at the right of selection boundary. + private void OnAlignRight() + { + diagram.SetAlign(AlignmentOptions.Right); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/AlignTop.razor b/Diagram/Server/Pages/Commands/AlignTop.razor new file mode 100644 index 0000000..c14791c --- /dev/null +++ b/Diagram/Server/Pages/Commands/AlignTop.razor @@ -0,0 +1,56 @@ +@page "/AlignTop" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 500, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node3); + } + //Method to align selected objects at the top of selection boundary. + private void OnAlignTop() + { + diagram.SetAlign(AlignmentOptions.Top); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/BringForward.razor b/Diagram/Server/Pages/Commands/BringForward.razor new file mode 100644 index 0000000..f08a64c --- /dev/null +++ b/Diagram/Server/Pages/Commands/BringForward.razor @@ -0,0 +1,56 @@ +@page "/BringForward" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Buttons + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 90, + Height = 80, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 90, + Height = 80, + OffsetX = 240, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Cylinder }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 120, + Height = 80, + OffsetX = 170, + OffsetY = 60, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node3); + } + private void bringForward() + { + diagram.Select(new ObservableCollection() { diagram.Nodes[1] }); + diagram.BringForward(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/BringIntoCenter.razor b/Diagram/Server/Pages/Commands/BringIntoCenter.razor new file mode 100644 index 0000000..a4104c5 --- /dev/null +++ b/Diagram/Server/Pages/Commands/BringIntoCenter.razor @@ -0,0 +1,31 @@ +@page "/BringIntoCenter" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes; + DiagramObjectCollection connectors; + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node { ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() { Content = "Node1" } } }, + }; + } + //Brings the specified bounds into the center of the view port of the diagram + private void BringIntoCenter() + { + DiagramRect bound = new DiagramRect(950, 650, 500, 500); + diagram.BringIntoCenter(bound); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/BringIntoView.razor b/Diagram/Server/Pages/Commands/BringIntoView.razor new file mode 100644 index 0000000..e06e425 --- /dev/null +++ b/Diagram/Server/Pages/Commands/BringIntoView.razor @@ -0,0 +1,30 @@ +@page "/BringIntoView" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes; + DiagramObjectCollection connectors; + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node { ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() { Content = "Node1" } } }, + }; + } + //Brings the specified bounds into the view port of the diagram + private void BringIntoView() + { + DiagramRect bound = new DiagramRect(950, 650, 500, 500); + diagram.BringIntoView(bound); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/BringToFront.razor b/Diagram/Server/Pages/Commands/BringToFront.razor new file mode 100644 index 0000000..142ecc1 --- /dev/null +++ b/Diagram/Server/Pages/Commands/BringToFront.razor @@ -0,0 +1,57 @@ +@page "/BringToFront" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Buttons + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 90, + Height = 80, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 90, + Height = 80, + OffsetX = 240, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Cylinder }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 120, + Height = 80, + OffsetX = 170, + OffsetY = 60, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node3); + } + + private void bringToFront() + { + diagram.Select(new ObservableCollection() { diagram.Nodes[0] }); + diagram.BringToFront(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/CanZoomIn.razor b/Diagram/Server/Pages/Commands/CanZoomIn.razor new file mode 100644 index 0000000..1bb03d5 --- /dev/null +++ b/Diagram/Server/Pages/Commands/CanZoomIn.razor @@ -0,0 +1,115 @@ +@page "/CanZoomIn" + +@using Syncfusion.Blazor.Diagram + +@using Syncfusion.Blazor.Buttons + + + +
+ + + +
+ +@code +{ + + public SfDiagramComponent diagram; + + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + FitOptions Options = new FitOptions() + + { + + Mode = FitMode.Height, + + Region = DiagramRegion.Content, + + CanZoomIn = true + + }; + + protected override void OnInitialized() + + { + + Node node1 = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 100, + Width = 100, + Height = 50, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + + nodes.Add(node1); + + Node node2 = new Node() + { + ID = "node2", + OffsetX = 250, + OffsetY = 180, + Width = 100, + Height = 50, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + + nodes.Add(node2); + + Node node3 = new Node() + + { + ID = "node3", + OffsetX = 250, + OffsetY = 260, + Width = 100, + Height=50, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + nodes.Add(node3); + + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + Type = ConnectorSegmentType.Straight + }; + connectors.Add(connector1); + + Connector connector2 = new Connector() + { + ID = "connector2", + SourceID = "node2", + TargetID = "node3", + Type = ConnectorSegmentType.Straight + }; + connectors.Add(connector2); + + } + public void CanZoom() + { + diagram.FitToPage(Options); + } + +} + diff --git a/Diagram/Server/Pages/Commands/ClipboardCommands.razor b/Diagram/Server/Pages/Commands/ClipboardCommands.razor new file mode 100644 index 0000000..39dea0a --- /dev/null +++ b/Diagram/Server/Pages/Commands/ClipboardCommands.razor @@ -0,0 +1,72 @@ +@page "/ClipboardCommands" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + + + +@code +{ + //Reference to diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 400, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } + }; + nodes.Add(node2); + } + //Method to remove selected nodes/connectors and move them to clipborad. + private void OnCut() + { + diagram.Cut(); + } + //Method to copies selected nodes/connectors to the clipborad. + private void OnCopy() + { + diagram.Copy(); + } + //Method to adds the given objects in the diagram clipboard to the diagram control. + private void OnPaste() + { + diagram.Paste(); + } + //Method to adds the given objects in the parameter to the diagram control. + private void PasteWithArgument() + { + DiagramObjectCollection nodeBase = new DiagramObjectCollection(); + Node clonedNode = diagram.Nodes[0].Clone() as Node; + clonedNode.OffsetX += 10; + clonedNode.OffsetY += 10; + nodeBase.Add(clonedNode); + diagram.Paste(nodeBase); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/CustomCommands.razor b/Diagram/Server/Pages/Commands/CustomCommands.razor new file mode 100644 index 0000000..bf9af86 --- /dev/null +++ b/Diagram/Server/Pages/Commands/CustomCommands.razor @@ -0,0 +1,93 @@ +@page "/CustomCommands" + +@using Syncfusion.Blazor.Diagram + + + @* Initializing the custom commands *@ + + + + + + +@code +{ + // Reference to diagram + SfDiagramComponent diagram; + DiagramObjectCollection command = new DiagramObjectCollection() + { + new KeyboardCommand() + { + Name = "CustomGroup", + Gesture = new KeyGesture() { Key = DiagramKeys.G, Modifiers = ModifierKeys.Control } + }, + new KeyboardCommand() + { + Name = "CustomUngroup", + Gesture = new KeyGesture() { Key = DiagramKeys.U, Modifiers = ModifierKeys.Control } + }, + }; + // Defines diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() { Content = "Node" } + } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + OffsetX = 300, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() { Content = "Node1" } + } + }; + nodes.Add(node2); + } + + public void canexe(CommandKeyArgs args) + { + args.CanExecute = true; + } + + /// + /// Custom command execution event + /// + public void CommandExecute(CommandKeyArgs args) + { + if (args.Gesture.Modifiers == ModifierKeys.Control && args.Gesture.Key == DiagramKeys.G) + { + //Custom command to group the selected nodes + diagram.Group(); + } + if (args.Gesture.Modifiers == ModifierKeys.Control && args.Gesture.Key == DiagramKeys.U) + { + DiagramSelectionSettings selector = diagram.SelectionSettings; + //Custom command to ungroup the selected items + if (selector.Nodes.Count > 0 && selector.Nodes[0] is NodeGroup) + { + if ((selector.Nodes[0] as NodeGroup).Children.Length > 0) + { + diagram.Ungroup(); + } + } + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/FitToPage.razor b/Diagram/Server/Pages/Commands/FitToPage.razor new file mode 100644 index 0000000..92115cc --- /dev/null +++ b/Diagram/Server/Pages/Commands/FitToPage.razor @@ -0,0 +1,130 @@ +@page "/FitToPage" + +@using Syncfusion.Blazor.Diagram +@using Node = Syncfusion.Blazor.Diagram.Node +@using Syncfusion.Blazor.Buttons + + + + +@code { + //Initialize of all the variables, methods and classes. + public SfDiagramComponent diagram; + FitOptions options = new FitOptions() { Mode = FitMode.Both, Region = DiagramRegion.Content }; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + string selectedMode; + string selectedRegion; + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node2 = new Node() + { + ID = "node2", + OffsetX = 500, + OffsetY = 700, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node3 = new Node() + { + ID = "node3", + OffsetX = 500, + OffsetY = 500, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node4 = new Node() + { + ID = "node4", + OffsetX = 1000, + OffsetY = 700, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node5 = new Node() + { + ID = "node5", + OffsetX = 1150, + OffsetY = 400, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node6 = new Node() + { + ID = "node6", + OffsetX = 500, + OffsetY = 1000, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + nodes.Add(node1); + nodes.Add(node2); + nodes.Add(node3); + nodes.Add(node4); + nodes.Add(node5); + nodes.Add(node6); + } + private void Mode(ChangeEventArgs e) + { + if (e.Value != null) + { + selectedMode = (string)e.Value; + switch (selectedMode) + { + case "Both": + options = new FitOptions(); + options.Mode = FitMode.Both; + break; + case "Width": + options = new FitOptions(); + options.Mode = FitMode.Width; + break; + case "Height": + options = new FitOptions(); + options.Mode = FitMode.Height; + break; + } + } + } + + + private void RegionChange(ChangeEventArgs e) + { + if (e.Value != null) + { + selectedRegion = (string)e.Value; + switch (selectedRegion) + { + case "PageSettings": + options = new FitOptions(); + options.Region = DiagramRegion.PageSettings; + break; + case "Content": + options = new FitOptions(); + options.Region = DiagramRegion.Content; + break; + } + } + } + + //fit the diagram to the page with respect to mode and region. + private void FitToPage() + { + diagram.FitToPage(options); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/GroupingCommands.razor b/Diagram/Server/Pages/Commands/GroupingCommands.razor new file mode 100644 index 0000000..4cffabf --- /dev/null +++ b/Diagram/Server/Pages/Commands/GroupingCommands.razor @@ -0,0 +1,60 @@ +@page "/GroupingCommands" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + +@code +{ + //Reference to diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 400, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } + }; + nodes.Add(node2); + } + // Method to group the selected nodes and connectors. + private void OnGroup() + { + diagram.Group(); + } + // Method to ungroup the selected nodes and connectors. + private void OnUngroup() + { + diagram.Ungroup(); + } + // Method to select all objects. + private void OnSelectAll() + { + diagram.SelectAll(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/ModifyExistingCommands.razor b/Diagram/Server/Pages/Commands/ModifyExistingCommands.razor new file mode 100644 index 0000000..8fcdf4c --- /dev/null +++ b/Diagram/Server/Pages/Commands/ModifyExistingCommands.razor @@ -0,0 +1,85 @@ +@page "/ModifyExistingCommands" + +@using Syncfusion.Blazor.Diagram + + + @* Initializing the custom commands *@ + + + + + + +@code +{ + // Reference to diagram + SfDiagramComponent diagram; + // Defines diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection commands = new DiagramObjectCollection() + { + new KeyboardCommand() + { + Name = "SelectAll", + Gesture = new KeyGesture() { Key = DiagramKeys.A, Modifiers = ModifierKeys.Control } + }, + new KeyboardCommand() + { + Name = "Copy", + Gesture = new KeyGesture() { Key = DiagramKeys.C, Modifiers = ModifierKeys.Control } + } + }; + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() { Content = "Node" } + } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + OffsetX = 300, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() { Content = "Node1" } + } + }; + nodes.Add(node2); + } + + public void canexe(CommandKeyArgs args) + { + args.CanExecute = true; + } + + /// + /// Custom command execution event + /// + public void CommandExecute(CommandKeyArgs args) + { + if (args.Gesture.Modifiers == ModifierKeys.Control && args.Gesture.Key == DiagramKeys.A) + { + //to disable a built-in command and none of action execute + } + if (args.Gesture.Modifiers == ModifierKeys.Control && args.Gesture.Key == DiagramKeys.C) + { + //Modify the existing copy command to cut command + diagram.Cut(); + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/NudgeCommand.razor b/Diagram/Server/Pages/Commands/NudgeCommand.razor new file mode 100644 index 0000000..8dc1336 --- /dev/null +++ b/Diagram/Server/Pages/Commands/NudgeCommand.razor @@ -0,0 +1,35 @@ +@page "/NudgeCommand" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + }; + nodes.Add(node); + } + + private void NudgeLeft() + { + //Repositions the selected objects by 50 towards left direction. + diagram.Nudge(Direction.Left, 50); + } +} diff --git a/Diagram/Server/Pages/Commands/SendBackward.razor b/Diagram/Server/Pages/Commands/SendBackward.razor new file mode 100644 index 0000000..56a0a8d --- /dev/null +++ b/Diagram/Server/Pages/Commands/SendBackward.razor @@ -0,0 +1,56 @@ +@page "/SendBackward" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Buttons + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 90, + Height = 80, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 90, + Height = 80, + OffsetX = 240, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Cylinder }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 120, + Height = 80, + OffsetX = 170, + OffsetY = 60, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node3); + } + private void sendBackward() + { + diagram.Select(new ObservableCollection() { diagram.Nodes[2] }); + diagram.SendBackward(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/SendToBack.razor b/Diagram/Server/Pages/Commands/SendToBack.razor new file mode 100644 index 0000000..1b51d2d --- /dev/null +++ b/Diagram/Server/Pages/Commands/SendToBack.razor @@ -0,0 +1,56 @@ +@page "/SendToBack" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Buttons + + + + +@code { + //Reference the diagram. + SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 90, + Height = 80, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 90, + Height = 80, + OffsetX = 240, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Cylinder }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 120, + Height = 80, + OffsetX = 170, + OffsetY = 60, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#ffff" }, + }; + nodes.Add(node3); + } + private void sendToBack() + { + diagram.Select(new ObservableCollection() { diagram.Nodes[2] }); + diagram.SendToBack(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/SetDistributeCommands.razor b/Diagram/Server/Pages/Commands/SetDistributeCommands.razor new file mode 100644 index 0000000..940209d --- /dev/null +++ b/Diagram/Server/Pages/Commands/SetDistributeCommands.razor @@ -0,0 +1,104 @@ +@page "/SetDistributeCommands" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + + + + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection Connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 400, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node3); + } + + private void OnDistributeLeft() + { + //Distributes the objects based on the distance between the left sides of the adjacent objects. + diagram.SetDistribute(DistributeOptions.Left); + } + + private void OnDistributeRight() + { + //Distributes the objects based on the distance between the right sides of the adjacent objects. + diagram.SetDistribute(DistributeOptions.Right); + } + + private void OnDistributeTop() + { + //Distributes the objects based on the distance between the top sides of the adjacent objects. + diagram.SetDistribute(DistributeOptions.Top); + } + + private void OnDistributeBottom() + { + //Distributes the objects based on the distance between the bottom sides of the adjacent objects. + diagram.SetDistribute(DistributeOptions.Bottom); + } + + private void OnDistributeMiddle() + { + //Distributes the objects based on the distance between vertical centers of the adjacent objects. + diagram.SetDistribute(DistributeOptions.Middle); + } + + private void OnDistributeCenter() + { + //Distributes the objects based on the distance between the centers of the adjacent objects. + diagram.SetDistribute(DistributeOptions.Center); + } + + private void OnDistributeBottomToTop() + { + //Distributes the objects based on the distance between bottom and top sides of adjacent objects. + diagram.SetDistribute(DistributeOptions.BottomToTop); + } + + private void OnDistributeRightToLeft() + { + //Distributes the objects based on the distance between right and left sides of adjacent objects. + diagram.SetDistribute(DistributeOptions.RightToLeft); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/SizingCommands.razor b/Diagram/Server/Pages/Commands/SizingCommands.razor new file mode 100644 index 0000000..2a640e2 --- /dev/null +++ b/Diagram/Server/Pages/Commands/SizingCommands.razor @@ -0,0 +1,71 @@ +@page "/SizingCommands" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + +@code +{ + //Reference to diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 400, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } + }; + nodes.Add(node3); + } + //Method to scales the selected objects both vertically and horizontally. + private void OnSameSize() + { + diagram.SetSameSize(SizingMode.Both); + } + //Method to scales the width of selected objects. + private void OnSameWidth() + { + diagram.SetSameSize(SizingMode.Width); + } + //Method to scales the height of selected objects. + private void OnSameHeight() + { + diagram.SetSameSize(SizingMode.Height); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/UndoRedoCommands.razor b/Diagram/Server/Pages/Commands/UndoRedoCommands.razor new file mode 100644 index 0000000..0cb1890 --- /dev/null +++ b/Diagram/Server/Pages/Commands/UndoRedoCommands.razor @@ -0,0 +1,49 @@ +@page "/UndoRedoCommands" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + +@code +{ + //Reference to diagram + SfDiagramComponent diagram; + // To define node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + Shape = new Shape() { Type = NodeShapes.Basic } + }; + // Add node + nodes.Add(node); + } + + private void Undo() + { + //Revert the changes + diagram.Undo(); + } + + private void Redo() + { + //Restore the changes + diagram.Redo(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Commands/ZoomingCommands.razor b/Diagram/Server/Pages/Commands/ZoomingCommands.razor new file mode 100644 index 0000000..dd60fcc --- /dev/null +++ b/Diagram/Server/Pages/Commands/ZoomingCommands.razor @@ -0,0 +1,40 @@ +@page "/ZoomingCommands" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + //Reference to diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } + }; + nodes.Add(node1); + } + + private void OnZoom() + { + // Sets the ZoomFactor + // Defines the FocusPoint to zoom the Diagram with respect to any point + // When you do not set focus point, zooming is performed with reference to the center of current Diagram view. + diagram.Zoom(1.2, new DiagramPoint() { X = 100, Y = 100 }); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/AddConnectorAtRuntime.razor b/Diagram/Server/Pages/Connectors/Connector/AddConnectorAtRuntime.razor new file mode 100644 index 0000000..757b843 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/AddConnectorAtRuntime.razor @@ -0,0 +1,24 @@ +@page "/AddConnectorAtRuntime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + +@code { + + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() { ID = "connector1", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, Type = ConnectorSegmentType.Straight }; + connectors.Add(Connector); + } + public void AddConnector() + { + Connector NewConnector = new Connector() { ID = "connector2", SourcePoint = new DiagramPoint() { X = 300, Y = 300 }, TargetPoint = new DiagramPoint() { X = 400, Y = 400 }, Type = ConnectorSegmentType.Straight }; + //Add the connector at the run time. + connectors.Add(NewConnector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/AddConnectorThroughConnectorCollection.razor b/Diagram/Server/Pages/Connectors/Connector/AddConnectorThroughConnectorCollection.razor new file mode 100644 index 0000000..a3b7630 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/AddConnectorThroughConnectorCollection.razor @@ -0,0 +1,25 @@ +@page "/AddConnectorThroughConnectorCollection" + +@using Syncfusion.Blazor.Diagram + + + +@code { + //Define snap constraints + SnapConstraints snapConstraints = SnapConstraints.None; + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + // Type of the connector segemnts + Type = ConnectorSegmentType.Straight + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/BezierAllowSegmentsReset.razor b/Diagram/Server/Pages/Connectors/Connector/BezierAllowSegmentsReset.razor new file mode 100644 index 0000000..b200f46 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/BezierAllowSegmentsReset.razor @@ -0,0 +1,64 @@ +@page "/BezierAllowSegmentsReset" + +@using Syncfusion.Blazor.Diagram + + + +@code { + DiagramObjectCollection connectors = new DiagramObjectCollection(); + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes.Add( + new Node() + { + ID = "node1", + OffsetX = 300, + OffsetY = 100, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="Port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + }, + } + }); + nodes.Add(new Node() + { + ID = "node2", + OffsetX = 300, + OffsetY = 350, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="Port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + }, + } + }); + + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + SourcePortID = "Port1", + TargetPortID = "Port1", + Type = ConnectorSegmentType.Bezier, + Segments = new DiagramObjectCollection() { new BezierSegment() { Type = ConnectorSegmentType.Bezier } }, + //Defines whether to reset current segments collection in response to change in the connector ends. + BezierConnectorSettings = new BezierConnectorSettings() { AllowSegmentsReset = false }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/BezierConnectorMultiSegment.razor b/Diagram/Server/Pages/Connectors/Connector/BezierConnectorMultiSegment.razor new file mode 100644 index 0000000..bb4d63c --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/BezierConnectorMultiSegment.razor @@ -0,0 +1,63 @@ +@page "/BezierConnectorMultiSegment" + +@using Syncfusion.Blazor.Diagram + + + +@code { + DiagramObjectCollection connectors = new DiagramObjectCollection(); + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes.Add( + new Node() + { + ID = "node1", + OffsetX = 300, + OffsetY = 100, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="Port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + }, + } + }); + nodes.Add(new Node() + { + ID = "node2", + OffsetX = 300, + OffsetY = 350, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="Port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + }, + } + }); + + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + SourcePortID = "Port1", + TargetPortID = "Port1", + Type = ConnectorSegmentType.Bezier, + //Defines the smoothness for bezier connector + BezierConnectorSettings = new BezierConnectorSettings() { Smoothness = BezierSmoothness.SymmetricAngle }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/BezierControlPointsVisibility.razor b/Diagram/Server/Pages/Connectors/Connector/BezierControlPointsVisibility.razor new file mode 100644 index 0000000..24743ec --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/BezierControlPointsVisibility.razor @@ -0,0 +1,84 @@ +@page "/BezierControlPointsVisibility" + +@using Syncfusion.Blazor.Diagram + + + +
+ ControlPointVisibility: + +
+ +
+ +
+@code { + //Reference for diagram + SfDiagramComponent diagram; + //Defines diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector connector1 = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 700, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 1000, Y = 400 }, + Segments = new DiagramObjectCollection() + { + new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 750, Y = 250}}, + new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 900, Y = 350}} + }, + Type = ConnectorSegmentType.Bezier, + BezierConnectorSettings = new BezierConnectorSettings() + { + //Defines the visibility of the control points + ControlPointsVisibility = ControlPointsVisibility.Intermediate + }, + }; + connectors.Add(connector1); + } + + private void controlPointVisibilityChange(ChangeEventArgs args) + { + int index = int.Parse(args.Value.ToString()); + Connector connector = diagram.SelectionSettings.Connectors[0]; + + switch (index) + { + case 0: + connector.BezierConnectorSettings.ControlPointsVisibility = ControlPointsVisibility.None; + break; + case 1: + connector.BezierConnectorSettings.ControlPointsVisibility = ControlPointsVisibility.Source; + break; + case 2: + connector.BezierConnectorSettings.ControlPointsVisibility = ControlPointsVisibility.Target; + break; + case 3: + connector.BezierConnectorSettings.ControlPointsVisibility = ControlPointsVisibility.Intermediate; + break; + case 4: + connector.BezierConnectorSettings.ControlPointsVisibility = ControlPointsVisibility.All; + break; + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/BezierSegment1.razor b/Diagram/Server/Pages/Connectors/Connector/BezierSegment1.razor new file mode 100644 index 0000000..46941cb --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/BezierSegment1.razor @@ -0,0 +1,66 @@ +@page "/BezierSegment1" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + + +
+ + +
+ +@code { + SfSymbolPaletteComponent PaletteInstance; + SfDiagramComponent DiagramInstance; + DiagramObjectCollection PaletteConnector = new DiagramObjectCollection(); + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + protected override async Task OnAfterRenderAsync(bool firstRender) + { + PaletteInstance.Targets = new DiagramObjectCollection() { }; + PaletteInstance.Targets.Add(DiagramInstance); + } + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector diagramConnector = new Connector() { ID = "connector1", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, Type = ConnectorSegmentType.Straight }; + connectors.Add(diagramConnector); + PaletteConnector = new DiagramObjectCollection(); + Connector connector = new Connector + { + ID = "Link1", + Type = ConnectorSegmentType.Straight, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 } + + }; + PaletteConnector.Add(connector as NodeBase); + Connector connector2 = new Connector + { + ID = "Link2", + Type = ConnectorSegmentType.Orthogonal, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.OpenArrow }, + Style = new ShapeStyle() { StrokeWidth = 1 } + + }; + PaletteConnector.Add(connector2 as NodeBase); + Connector connector3 = new Connector + { + ID = "Link3", + Type = ConnectorSegmentType.Bezier, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.None }, + }; + PaletteConnector.Add(connector3 as NodeBase); + Palettes = new DiagramObjectCollection(){ + new Palette(){Symbols =PaletteConnector,Title="Connectors" ,IsExpanded = false}, + + }; + } + public void AddConnector() + { + Connector NewConnector = new Connector() { ID = "connector1", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, Type = ConnectorSegmentType.Straight }; + connectors.Add(NewConnector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/CloneConnector.razor b/Diagram/Server/Pages/Connectors/Connector/CloneConnector.razor new file mode 100644 index 0000000..f00d539 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/CloneConnector.razor @@ -0,0 +1,40 @@ +@page "/CloneConnector" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Buttons +@inject IJSRuntime js + + + + +@functions +{ + + SfDiagramComponent diagram; + public DiagramObjectCollection Connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector connector1 = new Connector() { ID = "connector1", SourcePoint = new DiagramPoint() { X = 100, Y = 10 }, TargetPoint = new DiagramPoint() { X = 200, Y = 100 }, Type = ConnectorSegmentType.Straight }; + Connectors.Add(connector1); + } + public async Task CloneConnector() + { + Connector connector = Connectors[0].Clone() as Connector; + connector.ID = RandomId(); + connector.SourcePoint = new DiagramPoint { X = 100, Y = 100 }; + connector.TargetPoint = new DiagramPoint { X = 200, Y = 100 }; + await diagram.AddDiagramElementsAsync(new DiagramObjectCollection() { connector }); + + } + internal string RandomId() + { + Random random = new Random(); + const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; +#pragma warning disable CA5394 // Do not use insecure randomness + return new string(Enumerable.Repeat(chars, 5) + .Select(s => s[random.Next(s.Length)]).ToArray()); +#pragma warning restore CA5394 // Do not use insecure randomness + } + +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/ConnectWithNode.razor b/Diagram/Server/Pages/Connectors/Connector/ConnectWithNode.razor new file mode 100644 index 0000000..18a4cb8 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/ConnectWithNode.razor @@ -0,0 +1,61 @@ +@page "/ConnectWithNode" + +@using Syncfusion.Blazor.Diagram + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + // Initialize diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() { + new Node() { OffsetX = 100, + OffsetY = 100, + Height = 50, + Width = 100, + ID = "node1", + Style = new ShapeStyle(){ Fill = "#6495ED", + StrokeColor = "#6495ED",}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }, + new Node() { OffsetX = 300, + OffsetY = 300, + Height = 50, + Width = 100, + ID = "node2", + Style = new ShapeStyle(){ Fill = "#6495ED", + StrokeColor = "#6495ED",}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + } + }; + Connector Connector = new Connector() + { + ID = "connector1", + //Source node id of the connector. + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + //Target node id of the connector. + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + // Type of the connector + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/ConnectWithPort.razor b/Diagram/Server/Pages/Connectors/Connector/ConnectWithPort.razor new file mode 100644 index 0000000..767691b --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/ConnectWithPort.razor @@ -0,0 +1,93 @@ +@page "/ConnectWithPort" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + // Initialize diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node() + { + OffsetX = 100, + OffsetY = 100, + Height = 50, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 1, Y = 0.5}, + Height = 10, Width = 10, + Style = new ShapeStyle(){Fill = "yellow", StrokeColor = "yellow"} + } + }, + Width = 100, + ID = "node1", + Style = new ShapeStyle(){ Fill = "#6495ED", StrokeColor = "#6495ED"}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }, + new Node() + { + OffsetX = 300, + OffsetY = 300, + Height = 50, + Width = 100, + ID = "node2", + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="port2", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 0, Y = 0.5}, + Height = 10, Width = 10, + Style = new ShapeStyle(){Fill = "yellow", StrokeColor = "yellow"} + } + }, + Style = new ShapeStyle(){ Fill = "#6495ED", StrokeColor = "#6495ED" }, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + } + }; + Connector Connector = new Connector() + { + ID = "connector1", + //Source node id of the connector. + SourceID = "node1", + //source node port id. + SourcePortID = "port1", + //Target node id of the connector. + TargetID = "node2", + //Target node port id. + TargetPortID = "port2", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + // Type of the connector. + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/ConnectorFromPalette.razor b/Diagram/Server/Pages/Connectors/Connector/ConnectorFromPalette.razor new file mode 100644 index 0000000..29a1071 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/ConnectorFromPalette.razor @@ -0,0 +1,71 @@ +@page "/ConnectorFromPalette" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +
+ + +
+ +@code { + //Reference the Symbolpalette + SfSymbolPaletteComponent PaletteInstance; + //Reference the diagram + SfDiagramComponent DiagramInstance; + //Defines Symbol palette's PaletteConnector collection + DiagramObjectCollection PaletteConnector = new DiagramObjectCollection(); + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + protected override async Task OnAfterRenderAsync(bool firstRender) + { + PaletteInstance.Targets = new DiagramObjectCollection() { }; + PaletteInstance.Targets.Add(DiagramInstance); + } + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + // Type of the connector segemnts + Type = ConnectorSegmentType.Straight + }; + connectors.Add(Connector); + PaletteConnector = new DiagramObjectCollection(); + Connector connector = new Connector + { + ID = "Link1", + Type = ConnectorSegmentType.Straight, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 } + + }; + PaletteConnector.Add(connector as NodeBase); + Connector connector2 = new Connector + { + ID = "Link2", + Type = ConnectorSegmentType.Orthogonal, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.OpenArrow }, + Style = new ShapeStyle() { StrokeWidth = 1 } + + }; + PaletteConnector.Add(connector2 as NodeBase); + Connector connector3 = new Connector + { + ID = "Link3", + Type = ConnectorSegmentType.Bezier, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.None }, + }; + PaletteConnector.Add(connector3 as NodeBase); + Palettes = new DiagramObjectCollection(){ + new Palette(){Symbols =PaletteConnector,Title="Connectors" ,IsExpanded = true}, + + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/RemoveConnectorsAtRunTime.razor b/Diagram/Server/Pages/Connectors/Connector/RemoveConnectorsAtRunTime.razor new file mode 100644 index 0000000..9c8c3a5 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/RemoveConnectorsAtRunTime.razor @@ -0,0 +1,41 @@ +@page "/RemoveConnectorsAtRunTime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code { + //Defines snap consttraints + SnapConstraints snapConstraints = SnapConstraints.None; + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + // Style of the connector segment + Style = new ShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 } + }, + Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, + // Type of the connector + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + } + public void RemoveConnector() + { + // Remove connector at runtime + connectors.Remove(connectors[0]); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Connector/UpdateConnectorAtRunTime.razor b/Diagram/Server/Pages/Connectors/Connector/UpdateConnectorAtRunTime.razor new file mode 100644 index 0000000..4194725 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Connector/UpdateConnectorAtRunTime.razor @@ -0,0 +1,40 @@ +@page "/UpdateConnectorAtRunTime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + //Defines the snap constraints + SnapConstraints snapConstraints = SnapConstraints.None; + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.Arrow, Style = new ShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 } }, + Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, + // Type of the connector + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + } + //Method to update connector at runtime. + public void UpdateConnector() + { + Diagram.BeginUpdate(); + Diagram.Connectors[0].SourcePoint.X = 50; + Diagram.Connectors[0].SourcePoint.Y = 50; + _ = Diagram.EndUpdateAsync(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/Bridging.razor b/Diagram/Server/Pages/Connectors/Customization/Bridging.razor new file mode 100644 index 0000000..e01f469 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/Bridging.razor @@ -0,0 +1,83 @@ +@page "/Bridging" + +@using Syncfusion.Blazor.Diagram + + +@code { + //Define diagram constraints + DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + + Connector Connector1 = new Connector() + { + ID = "connector1", + // Bridge space value has been defined + BridgeSpace = 20, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 1 + }, + SourcePoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + TargetPoint = new DiagramPoint() + { + X = 400, + Y = 200 + }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 1 + } + } + + }; + connectors.Add(Connector1); + Connector Connector2 = new Connector() + { + ID = "connector2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 1 + }, + SourcePoint = new DiagramPoint() + { + X = 300, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 300, + Y = 300 + }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 1 + } + } + + }; + connectors.Add(Connector2); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/ConnectionPadding.razor b/Diagram/Server/Pages/Connectors/Customization/ConnectionPadding.razor new file mode 100644 index 0000000..19480d1 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/ConnectionPadding.razor @@ -0,0 +1,42 @@ +@page "/ConnectionPadding" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + ConnectionPadding = 50, + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/Constraints.razor b/Diagram/Server/Pages/Connectors/Customization/Constraints.razor new file mode 100644 index 0000000..34436ab --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/Constraints.razor @@ -0,0 +1,49 @@ +@page "/Constraints" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Intialize the diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "black", + StrokeColor = "black", + StrokeWidth = 1 + } + }, + Style = new ShapeStyle() + { + StrokeColor = "black", + StrokeWidth = 1 + }, + //Disable the select constraint. + Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select, + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/CornerRadius.razor b/Diagram/Server/Pages/Connectors/Customization/CornerRadius.razor new file mode 100644 index 0000000..3caf440 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/CornerRadius.razor @@ -0,0 +1,50 @@ +@page "/CornerRadius" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Intialize the diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 1 + }, + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + //Specify the corner radius value. + CornerRadius = 10, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 1 + } + } + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/CustomProperty.razor b/Diagram/Server/Pages/Connectors/Customization/CustomProperty.razor new file mode 100644 index 0000000..e759b76 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/CustomProperty.razor @@ -0,0 +1,50 @@ +@page "/CustomProperty" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Dictionary ConnectorInfo = new Dictionary(); + ConnectorInfo.Add("connectorInfo", "Central Connector"); + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "black", + StrokeColor = "black", + StrokeWidth = 1 + } + }, + Style = new ShapeStyle() + { + StrokeColor = "black", + StrokeWidth = 1 + }, + //Define the add info value. + AdditionalInfo = ConnectorInfo + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/Decorator.razor b/Diagram/Server/Pages/Connectors/Customization/Decorator.razor new file mode 100644 index 0000000..7cd7e88 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/Decorator.razor @@ -0,0 +1,44 @@ +@page "/Decorator" + +@using Syncfusion.Blazor.Diagram + + +@code { + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, + Type = ConnectorSegmentType.Orthogonal, + SourceDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Circle, + Style = new ShapeStyle() + { StrokeColor = "#37909A", Fill = "#37909A", StrokeWidth = 1 } + }, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Custom, + PathData = "M80.5,12.5 C80.5,19.127417 62.59139,24.5 40.5,24.5 C18.40861,24.5 0.5,19.127417 0.5,12.5 C0.5,5.872583 18.40861,0.5 40.5,0.5 C62.59139,0.5 80.5,5.872583 80.5,12.5 z", + Style = new ShapeStyle() + { + StrokeColor = "#37909A", + Fill = "#37909A", + StrokeWidth = 1, + + } + } + + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/DecoratorAppearance.razor b/Diagram/Server/Pages/Connectors/Customization/DecoratorAppearance.razor new file mode 100644 index 0000000..122d997 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/DecoratorAppearance.razor @@ -0,0 +1,58 @@ +@page "/DecoratorAppearance" + +@using Syncfusion.Blazor.Diagram + + +@code { + // Initialize diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + + Connector Connector = new Connector() + { + ID = "connector1", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 1 + }, + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + Type = ConnectorSegmentType.Orthogonal, + SourceDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Height = 15, + Width = 15, + //Define source decorator style + Style = new ShapeStyle() + { StrokeColor = "blue", Fill = "yellow", StrokeWidth = 3 } + }, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Height = 15, + Width = 15, + //Define target decorator style + Style = new ShapeStyle() + { + StrokeColor = "red", + Fill = "yellow", + StrokeWidth = 3 + } + } + + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/DecoratorAppearance1.razor b/Diagram/Server/Pages/Connectors/Customization/DecoratorAppearance1.razor new file mode 100644 index 0000000..79e5cce --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/DecoratorAppearance1.razor @@ -0,0 +1,57 @@ +@page "/DecoratorAppearance1" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 1 + }, + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + Type = ConnectorSegmentType.Orthogonal, + SourceDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Height = 15, + Width = 15, + Style = new ShapeStyle() + { StrokeColor = "blue", Fill = "yellow", StrokeWidth = 3 } + }, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Height = 15, + Width = 15, + Style = new ShapeStyle() + { + StrokeColor = "red", + Fill = "yellow", + StrokeWidth = 3 + } + } + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/MaxSegmentThumb.razor b/Diagram/Server/Pages/Connectors/Customization/MaxSegmentThumb.razor new file mode 100644 index 0000000..eabeb6a --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/MaxSegmentThumb.razor @@ -0,0 +1,47 @@ + @page "/maxSegmentThumb" + @using Syncfusion.Blazor.Diagram + + + + +@code { + private SfDiagramComponent? diagram; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // Create orthogonal connector with custom segments and styling. + Connector orthogonalConnector = new Connector() + { + ID = "orthogonal", + SourcePoint = new DiagramPoint() { X = 550, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 650, Y = 300 }, + Style = new ShapeStyle() { StrokeColor = "#6495ED" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" } + }, + Type = ConnectorSegmentType.Orthogonal, + // Define orthogonal segments (Type on each segment is redundant and omitted). + Segments = new DiagramObjectCollection() + { + new OrthogonalSegment + { + Length = 60, + Type = ConnectorSegmentType.Orthogonal, + Direction = Direction.Right + }, + new OrthogonalSegment + { + Length = 60, + Type = ConnectorSegmentType.Orthogonal, + Direction = Direction.Bottom + } + }, + MaxSegmentThumbs = 2 + }; + connectors.Add(orthogonalConnector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/MaxSegmentThumbRuntime.razor b/Diagram/Server/Pages/Connectors/Customization/MaxSegmentThumbRuntime.razor new file mode 100644 index 0000000..c5f47ff --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/MaxSegmentThumbRuntime.razor @@ -0,0 +1,84 @@ +@page "/MaxSegmentThumbRuntime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + +
+
+ + + + +
+ + +
+ +@code { + private SfDiagramComponent? diagram; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // Create orthogonal connector with custom segments and styling. + Connector orthogonalConnector = new Connector() + { + ID = "orthogonal", + SourcePoint = new DiagramPoint() { X = 550, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 650, Y = 300 }, + Style = new ShapeStyle() { StrokeColor = "#6495ED" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" } + }, + Type = ConnectorSegmentType.Orthogonal, + // Define orthogonal segments (Type on each segment is redundant and omitted). + Segments = new DiagramObjectCollection() + { + new OrthogonalSegment + { + Length = 60, + Type = ConnectorSegmentType.Orthogonal, + Direction = Direction.Right + }, + new OrthogonalSegment + { + Length = 60, + Type = ConnectorSegmentType.Orthogonal, + Direction = Direction.Bottom + } + }, + // Limit the number of visible/draggable segment thumbs. + MaxSegmentThumbs = 2 + }; + connectors.Add(orthogonalConnector); + } + + // Updates MaxSegmentThumbs to 5 for all currently selected connectors at runtime. + private void UpdateSelectedConnectorThumbs() + { + if (diagram?.SelectionSettings?.Connectors != null) + { + for (int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) + { + // Set segment thumb limit for selected connector only. + diagram.SelectionSettings.Connectors[i].MaxSegmentThumbs = 5; + } + } + } + + // Updates MaxSegmentThumbs to 6 for all connectors in the diagram at runtime. + private void UpdateAllConnectorThumbs() + { + if (diagram?.Connectors != null) + { + for (int i = 0; i < diagram.Connectors.Count; i++) + { + // Set segment thumb limit for each connector in diagram. + diagram.Connectors[i].MaxSegmentThumbs = 6; + } + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/Padding.razor b/Diagram/Server/Pages/Connectors/Customization/Padding.razor new file mode 100644 index 0000000..38b3ce9 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/Padding.razor @@ -0,0 +1,58 @@ +@page "/Padding" + +@using Syncfusion.Blazor.Diagram + + +@code { + //Defines diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() { + new Node() { + OffsetX = 100, + OffsetY = 100, + Height = 50, + Width = 100, + ID = "node1", + Style = new ShapeStyle(){ + Fill = "#6BA5D7", + StrokeColor = "#6BA5D7"}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }, + new Node() { OffsetX = 300, + OffsetY = 300, + Height = 50, + Width = 100, + ID = "node2", + Style = new ShapeStyle(){ + Fill = "#6BA5D7", + StrokeColor = "#6BA5D7"}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + + }}; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + //Specifies the source and target padding values. + SourcePadding = 20, + TargetPadding = 20, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", StrokeWidth = 1 } + }, + Style = new ShapeStyle() + { + StrokeColor = "#6BA5D7", + StrokeWidth = 1 + }, + Type = ConnectorSegmentType.Orthogonal + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/SegmentAppearance.razor b/Diagram/Server/Pages/Connectors/Customization/SegmentAppearance.razor new file mode 100644 index 0000000..3b4248c --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/SegmentAppearance.razor @@ -0,0 +1,49 @@ +@page "/SegmentAppearance" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Define diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector1 = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + //Define shape style + Style = new ShapeStyle() + { + StrokeColor = "red", + StrokeWidth = 2, + StrokeDashArray = "2,2" + }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6f409f", + StrokeColor = "#6f409f", + StrokeWidth = 1 + } + } + }; + connectors.Add(Connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/SourcePaddingAndTargetPadding.razor b/Diagram/Server/Pages/Connectors/Customization/SourcePaddingAndTargetPadding.razor new file mode 100644 index 0000000..4a46bef --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/SourcePaddingAndTargetPadding.razor @@ -0,0 +1,43 @@ +@page "/SourcePaddingAndTargetPadding" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + TargetPadding = 10, + SourcePadding = 10, + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Customization/ZIndexProperty.razor b/Diagram/Server/Pages/Connectors/Customization/ZIndexProperty.razor new file mode 100644 index 0000000..f46997e --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Customization/ZIndexProperty.razor @@ -0,0 +1,31 @@ +@page "/ZIndexProperty" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + + +@code +{ + SnapConstraints snapConstraints = SnapConstraints.None; + //Define the diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector. + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + // Type of the connector segments. + Type = ConnectorSegmentType.Straight, + //Define the ZIndex property. + ZIndex = -2, + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/CollectionChangeEvent.razor b/Diagram/Server/Pages/Connectors/Events/CollectionChangeEvent.razor new file mode 100644 index 0000000..154166b --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/CollectionChangeEvent.razor @@ -0,0 +1,34 @@ +@page "/CollectionChangeEvent" + +@using Syncfusion.Blazor.Diagram + + + + +@code{ + SfDiagramComponent Diagram; + //Defines diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector. + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + // Type of the connector segments. + Type = ConnectorSegmentType.Straight + }; + connectors.Add(Connector); + } + // Notify the Collection Changed event while changing the collection of the node or connector at run time. + private void OnCollectionChanged(CollectionChangedEventArgs args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/ConnectionChangeEvent.razor b/Diagram/Server/Pages/Connectors/Events/ConnectionChangeEvent.razor new file mode 100644 index 0000000..06ab7d6 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/ConnectionChangeEvent.razor @@ -0,0 +1,71 @@ +@page "/ConnectionChangeEvent" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + //Intialize the diagram connector's collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Intialize the diagram node's collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node() + { + OffsetX = 100, + OffsetY = 100, + Height = 50, + Width = 100, + ID = "node1", + }, + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + TargetID = "node1", + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "black", + StrokeColor = "black", + StrokeWidth = 1 + } + }, + Style = new ShapeStyle() + { + StrokeColor = "black", + StrokeWidth = 1 + }, + }; + connectors.Add(Connector); + } + + // To notify the connection changing event before the connection change. + private void OnConnectionChanging(ConnectionChangingEventArgs args) + { + //Sets true to cancel the connection change. + args.Cancel = true; + } + + // To notify the connection changed event after the connection has changed. + private void OnConnectionChange(ConnectionChangedEventArgs args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/ConnectorCreating.razor b/Diagram/Server/Pages/Connectors/Events/ConnectorCreating.razor new file mode 100644 index 0000000..78c2159 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/ConnectorCreating.razor @@ -0,0 +1,44 @@ +@page "/ConnectorCreating" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Define the connector collection. + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + connectors = new DiagramObjectCollection(); + //A connector is created and stored in the connectors collection. + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + TargetPoint = new DiagramPoint() + { + X = 300, + Y = 400, + } + }; + connectors.Add(Connector); + } + + public void OnConnectorCreating(IDiagramObject obj) + { + Connector connector = obj as Connector; + connector.Style.Fill = "black"; + connector.Style.StrokeColor = "black"; + connector.Style.Opacity = 1; + connector.TargetDecorator.Style.Fill = "black"; + connector.TargetDecorator.Style.StrokeColor = "black"; + } + } \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/MouseEnterEvent.razor b/Diagram/Server/Pages/Connectors/Events/MouseEnterEvent.razor new file mode 100644 index 0000000..50f70ab --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/MouseEnterEvent.razor @@ -0,0 +1,33 @@ +@page "/MouseEnterEvent" + +@using Syncfusion.Blazor.Diagram + + + + +@code{ + SfDiagramComponent Diagram; + //Defines diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector. + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + // Type of the connector segments. + Type = ConnectorSegmentType.Straight + }; + connectors.Add(Connector); + } + private void OnMouseEnter(DiagramElementMouseEventArgs args) + { + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/MouseHoverEvent.razor b/Diagram/Server/Pages/Connectors/Events/MouseHoverEvent.razor new file mode 100644 index 0000000..318bb74 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/MouseHoverEvent.razor @@ -0,0 +1,33 @@ +@page "/MouseHoverEvent" + +@using Syncfusion.Blazor.Diagram + + + + +@code{ + SfDiagramComponent Diagram; + //Defines diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector. + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + // Type of the connector segments. + Type = ConnectorSegmentType.Straight + }; + connectors.Add(Connector); + } + private void OnMouseHover(DiagramElementMouseEventArgs args) + { + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/MouseLeaveEvent.razor b/Diagram/Server/Pages/Connectors/Events/MouseLeaveEvent.razor new file mode 100644 index 0000000..8428d95 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/MouseLeaveEvent.razor @@ -0,0 +1,33 @@ +@page "/MouseLeaveEvent" + +@using Syncfusion.Blazor.Diagram + + + + +@code{ + SfDiagramComponent Diagram; + //Defines diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector. + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + // Type of the connector segments. + Type = ConnectorSegmentType.Straight + }; + connectors.Add(Connector); + } + private void OnMouseLeave(DiagramElementMouseEventArgs args) + { + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/PositionChangeEvent.razor b/Diagram/Server/Pages/Connectors/Events/PositionChangeEvent.razor new file mode 100644 index 0000000..45899c7 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/PositionChangeEvent.razor @@ -0,0 +1,62 @@ +@page "/PositionChangeEvent" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + //Initialize the diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "black", + StrokeColor = "black", + StrokeWidth = 1 + } + }, + Style = new ShapeStyle() + { + StrokeColor = "black", + StrokeWidth = 1 + }, + }; + connectors.Add(Connector); + } + + // Event to notify the position changing event before dragging the diagram elements + public void OnPositionChanging(PositionChangingEventArgs args) + { + //sets true to cancel the dragging. + args.Cancel = true; + } + + // Event to notify the position changed event after dragged the diagram elements. + private void OnPositionChanged(PositionChangedEventArgs arg) + { + //Action to be performed + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/PropertyChangedEvent.razor b/Diagram/Server/Pages/Connectors/Events/PropertyChangedEvent.razor new file mode 100644 index 0000000..53bcfc8 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/PropertyChangedEvent.razor @@ -0,0 +1,40 @@ +@page "/PropertyChangedEvent" + +@using Syncfusion.Blazor.Diagram + + + +@code { + SfDiagramComponent diagram; + //Defines diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector. + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + // Type of the connector segments. + Type = ConnectorSegmentType.Straight + }; + connectors.Add(Connector); + } + + // Method to handle Property Changed event + private void OnNodePropertyChanged(PropertyChangedEventArgs args) + { + if (args.Element is Connector changedNode) + { + // Logic to handle the property change for the specific connector + Console.WriteLine($"Node ID: {changedNode.ID} property changed."); + // Additional logic to handle updates + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/SegmentCollectionChangeEvent.razor b/Diagram/Server/Pages/Connectors/Events/SegmentCollectionChangeEvent.razor new file mode 100644 index 0000000..393cc2c --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/SegmentCollectionChangeEvent.razor @@ -0,0 +1,39 @@ +@page "/SegmentCollectionChangeEvent" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Define the connector collection. + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + connectors = new DiagramObjectCollection(); + //A connector is created and stored in the connectors collection. + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + TargetPoint = new DiagramPoint() + { + X = 300, + Y = 400, + } + }; + connectors.Add(Connector); + } + + public void SegmentCollectionChange(SegmentCollectionChangeEventArgs args) + { + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/SelectionChangeEvent.razor b/Diagram/Server/Pages/Connectors/Events/SelectionChangeEvent.razor new file mode 100644 index 0000000..0613b01 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/SelectionChangeEvent.razor @@ -0,0 +1,62 @@ +@page "/SelectionChangeEvent" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + //Initialize the diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "black", + StrokeColor = "black", + StrokeWidth = 1 + } + }, + Style = new ShapeStyle() + { + StrokeColor = "black", + StrokeWidth = 1 + }, + }; + connectors.Add(Connector); + } + + // Event to notify the selection changing event before select/unselect the diagram elements + public void SelectionChanging(SelectionChangingEventArgs args) + { + //sets true to cancel the selection. + args.Cancel = true; + } + + // Event to notify the selection changed event after select/unselect the diagram elements. + private void SelectionChanged(SelectionChangedEventArgs arg) + { + //Action to be performed + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/SourcePointChanged.razor b/Diagram/Server/Pages/Connectors/Events/SourcePointChanged.razor new file mode 100644 index 0000000..815ec5b --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/SourcePointChanged.razor @@ -0,0 +1,48 @@ +@page "/SourcePointChanged" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Reference the diagram. + SfDiagramComponent Diagram; + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + TargetPoint = new DiagramPoint() + { + X = 300, + Y = 400, + } + }; + connectors.Add(Connector); + } + + //Notify the source point changing event before the source point change. + private void OnSourcePointChanging(EndPointChangingEventArgs args) + { + //Set true to cancel the source point change. + args.Cancel = true; + } + + // Notify the source point changed event after the source point has changed. + private void OnSourcePointChanged(EndPointChangedEventArgs args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Events/TargetPointChanged.razor b/Diagram/Server/Pages/Connectors/Events/TargetPointChanged.razor new file mode 100644 index 0000000..efed0e4 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Events/TargetPointChanged.razor @@ -0,0 +1,47 @@ +@page "/TargetPointChanged" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Reference the diagram. + SfDiagramComponent Diagram; + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + TargetPoint = new DiagramPoint() + { + X = 300, + Y = 400, + } + }; + connectors.Add(Connector); + } + + + // Notify the target point changed event before the target point has changed. + private void OnTargetPointChanging(EndPointChangingEventArgs args) + { + //Action to be performed. + } + // Notify the target point changed event after the target point has changed. + private void OnTargetPointChanged(EndPointChangedEventArgs args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Interaction/AvoidLineOverlap.razor b/Diagram/Server/Pages/Connectors/Interaction/AvoidLineOverlap.razor new file mode 100644 index 0000000..aa94dfa --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/AvoidLineOverlap.razor @@ -0,0 +1,371 @@ +@page "/AvoidLineOverlap" +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Diagram + + + + + +@code { + SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + SnapConstraints snapConstraints = SnapConstraints.All; + DiagramInteractions DiagramInteractions = DiagramInteractions.ZoomPan; + DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing | DiagramConstraints.AvoidLineOverlapping; + LineRoutingSettings LineRoutingSettings = new LineRoutingSettings() + { + RoutingType = RoutingTypes.Classic + + }; + bool avoidLineOverlapping = true; + bool enableRouting = true; + bool enableSnapping = true; + protected override void OnInitialized() + { + InitDiagramModel(); + } + + private void InitDiagramModel() + { + Create1to16Node("node1", 205, 180, 80, 240); + Create1to16Node("node2", 205, 427.5, 80, 240); + Create9to5Node("node3", 415, 127.5, 100, 135); + Create9to5Node("node4", 415, 367.5, 100, 135); + Create9to5Node("node5", 615, 127.5, 100, 135); + Create9to5Node("node6", 615, 367.5, 100, 135); + Create16to1Node("node7", 820, 240, 80, 240); + CreateInputNode("node8", 70, 40, 80, 30, "Cin"); + CreateInputNode("node9", 70, 180, 80, 30, "A"); + CreateInputNode("node10", 70, 427.5, 80, 30, "B"); + CreateOutputNode("node11", 950, 240, 80, 30, "S"); + CreateOutputNode("node12", 950, 367.5, 80, 30, "Cout"); + CreateConnector("connector01", "node8", "node3", 0, 8, "lightGreen"); + CreateConnector("connector02", "node9", "node1", 0, 0, "orange"); + CreateConnector("connector03", "node10", "node2", 0, 0, "orange"); + CreateConnector("connector04", "node7", "node11", 0, 0, "orange"); + CreateConnector("connector05", "node6", "node12", 4, 0); + CreateConnector("connector06", "node3", "node5", 4, 8); + CreateConnector("connector07", "node5", "node4", 4, 8, "lightGreen"); + CreateConnector("connector08", "node4", "node6", 4, 8); + + //CreateConnector("connector1", "node1", "node3", 0, 0); + //CreateConnector("connector2", "node1", "node3", 1, 1); + //CreateConnector("connector3", "node1", "node3", 2, 2); + //CreateConnector("connector4", "node1", "node3", 3, 3); + //CreateConnector("connector5", "node1", "node5", 4, 0, "lightGreen"); + + //CreateConnector("connector6", "node1", "node5", 5, 1); + //CreateConnector("connector7", "node1", "node5", 6, 2); + //CreateConnector("connector8", "node1", "node5", 7, 3, "lightGreen"); + //CreateConnector("connector9", "node1", "node4", 8, 0, "lightGreen"); + //CreateConnector("connector10", "node1", "node4", 9, 1, "lightGreen"); + //CreateConnector("connector11", "node1", "node4", 10, 2); + //CreateConnector("connector12", "node1", "node4", 11, 3, "lightGreen"); + + //CreateConnector("connector13", "node1", "node6", 12, 0); + //CreateConnector("connector14", "node1", "node6", 13, 1, "lightGreen"); + //CreateConnector("connector15", "node1", "node6", 14, 2, "lightGreen"); + //CreateConnector("connector16", "node1", "node6", 15, 3); + CreateConnector("connector17", "node2", "node3", 0, 4, "lightGreen"); + //CreateConnector("connector18", "node2", "node3", 1, 5, "lightGreen"); + //CreateConnector("connector19", "node2", "node3", 2, 6); + //CreateConnector("connector20", "node2", "node3", 3, 7); + //CreateConnector("connector25", "node2", "node4", 8, 4); + //CreateConnector("connector26", "node2", "node4", 9, 5, "lightGreen"); + //CreateConnector("connector27", "node2", "node4", 10, 6); + //CreateConnector("connector28", "node2", "node4", 11, 7); + //CreateConnector("connector24", "node2", "node5", 7, 7, "lightGreen"); + //CreateConnector("connector23", "node2", "node5", 6, 6, "lightGreen"); + //CreateConnector("connector22", "node2", "node5", 5, 5, "lightGreen"); + //CreateConnector("connector21", "node2", "node5", 4, 4, "lightGreen"); + //CreateConnector("connector29", "node2", "node6", 12, 4, "lightGreen"); + //CreateConnector("connector30", "node2", "node6", 13, 5); + //CreateConnector("connector31", "node2", "node6", 14, 6); + //CreateConnector("connector32", "node2", "node6", 15, 7); + //CreateConnector("connector33", "node3", "node7", 0, 0); + //CreateConnector("connector34", "node3", "node7", 1, 1); + //CreateConnector("connector35", "node3", "node7", 2, 2, "lightGreen"); + //CreateConnector("connector36", "node3", "node7", 3, 3); + //CreateConnector("connector37", "node5", "node7", 0, 4); + //CreateConnector("connector38", "node5", "node7", 1, 5); + //CreateConnector("connector39", "node5", "node7", 2, 6); + //CreateConnector("connector40", "node5", "node7", 3, 7, "lightGreen"); + //CreateConnector("connector41", "node4", "node7", 0, 8); + //CreateConnector("connector42", "node4", "node7", 1, 9); + //CreateConnector("connector43", "node4", "node7", 2, 10, "lightGreen"); + //CreateConnector("connector44", "node4", "node7", 3, 11); + //CreateConnector("connector45", "node6", "node7", 0, 12); + //CreateConnector("connector46", "node6", "node7", 1, 13); + //CreateConnector("connector47", "node6", "node7", 2, 14); + //CreateConnector("connector48", "node6", "node7", 3, 15, "lightGreen"); + } + + public void Create1to16Node(string id, double x, double y, double width, double height) + { + Node node = CreateNode(id, x, y, width, height); + AddShape(node, 1, 16); + var inPorts = AddPorts(node, 1, "in"); + var outPorts = AddPorts(node, 16, "out"); + AddPortsLabels(node, 16, "out"); + } + + public void Create16to1Node(string id, double x, double y, double width, double height) + { + Node node = CreateNode(id, x, y, width, height); + AddShape(node, 16, 1); + + var inPorts = AddPorts(node, 16, "in"); + var outPorts = AddPorts(node, 1, "out"); + + AddPortsLabels(node, 16, "in"); + } + + public void Create9to5Node(string id, double x, double y, double width, double height) + { + List leftLabels = new List { "A_0", "A_1", "A_2", "A_3", "B_0", "B_1", "B_2", "B_3", "Cin" }; + List rightLabels = new List { "S_0", "S_1", "S_2", "S_3", "Cout" }; + + Node node = CreateNode(id, x, y, width, height, "4 Bit\nRCA"); + AddShape(node, 9, 5); + + var inPorts = AddPorts(node, 9, "in"); + var outPorts = AddPorts(node, 5, "out", 9); + + + AddPortsLabels(node, 9, "in", leftLabels); + AddPortsLabels(node, 5, "out", rightLabels, 9); + } + + public void CreateInputNode(string id, double x, double y, double width, double height, string label) + { + Node node = CreateNode(id, x, y, width, height, label); + AddShape(node, 0, 1); + + var outPorts = AddPorts(node, 1, "out"); + + if (node.Annotations.Count > 0) + { + var annotation = node.Annotations[0]; + annotation.Offset = new DiagramPoint + { + X = (width - 25) / (2 * width), + Y = 0.5 + }; + } + } + + public void CreateOutputNode(string id, double x, double y, double width, double height, string label) + { + Node node = CreateNode(id, x, y, width, height, label); + AddShape(node, 1, 0); + + var inPorts = AddPorts(node, 1, "in"); + + if (node.Annotations.Count > 0) + { + var annotation = node.Annotations[0]; + annotation.Offset = new DiagramPoint + { + X = 1 - ((width - 25) / (2 * width)), + Y = 0.5 + }; + } + } + + public void AddShape(Node node, int inCount, int outCount) + { + int maxCount = Math.Max(inCount, outCount); + double? rightX = outCount == 0 ? node.Width : node.Width - 25; + string pathData = $"M {rightX} 0 "; + + if (outCount > 1) + { + for (int i = 1; i <= outCount; i++) + { + double? portY = ((i / (double)maxCount) - (1 / (2.0 * maxCount))) * node.Height; + pathData += $"L {rightX} {portY} L {node.Width} {portY} L {rightX} {portY} "; + } + } + else if (outCount == 1) + { + pathData += $"L {rightX} {node.Height * 0.5} L {node.Width} {node.Height * 0.5} L {rightX} {node.Height * 0.5} "; + } + + double leftX = inCount == 0 ? 0 : 25; + pathData += $"L {rightX} {node.Height} L {leftX} {node.Height} "; + + if (inCount > 1) + { + for (int i = inCount; i >= 1; i--) + { + double? portY = ((i / (double)maxCount) - (1 / (2.0 * maxCount))) * node.Height; + pathData += $"L {leftX} {portY} L 0 {portY} L {leftX} {portY} "; + } + } + else if (inCount == 1) + { + pathData += $"L {leftX} {node.Height * 0.5} L 0 {node.Height * 0.5} L {leftX} {node.Height * 0.5} "; + } + + pathData += $"L {leftX} 0 Z"; + node.Shape = new PathShape { Type = NodeShapes.Path, Data = pathData }; + + } + + public DiagramObjectCollection AddPorts(Node node, int count, string side, double factor = 0) + { + + if (factor == 0) + { + factor = count; + } + DiagramObjectCollection Ports = new DiagramObjectCollection(); + + + if (count > 1) + { + for (int i = 1; i <= count; i++) + { + var port = new PointPort + { + ID = $"{node.ID}{side}{i - 1}", + Offset = new DiagramPoint + { + X = side == "out" ? 1 : 0, + Y = (i / (double)factor) - (1 / (2.0 * factor)) + }, + Visibility = PortVisibility.Visible, + Constraints = PortConstraints.Default | PortConstraints.Draw, + Shape = PortShapes.Circle, + Style = new ShapeStyle { Fill = "black" }, + Width = 8, + Height = 8 + }; + node.Ports.Add(port); + } + } + else + { + var port = new PointPort + { + ID = $"{node.ID}{side}0", + Offset = new DiagramPoint + { + X = side == "out" ? 1 : 0, + Y = 0.5 + }, + Visibility = PortVisibility.Visible, + Constraints = PortConstraints.Default | PortConstraints.Draw, + Shape = PortShapes.Circle, + Style = new ShapeStyle { Fill = "black" }, + Width = 8, + Height = 8, + + }; + node.Ports.Add(port); + } + + return Ports; + } + + public void AddPortsLabels(Node node, int count, string side, List labels = null, double factor = 0) + { + if (factor == 0) + { + factor = count; + } + DiagramObjectCollection Annotations = new DiagramObjectCollection(); + + double width = node.Width ?? 0.0; // Provide a default value to avoid null + double x = side == "out" ? (width - 25 * 0.5) / width : (25 * 0.5) / width; + + for (int i = 1; i <= count; i++) + { + var label = new ShapeAnnotation + { + Content = labels != null ? labels[i - 1] : $"{i - 1}", + Offset = new DiagramPoint + { + X = x, + Y = (i / (double)factor) - (1 / (2.0 * factor)) + }, + Style = new TextStyle { FontSize = 7 }, + VerticalAlignment = VerticalAlignment.Bottom, + Margin = new DiagramThickness { Bottom = 2 } + }; + node.Annotations.Add(label); + } + } + + public Node CreateNode(string id, double x, double y, double width, double height, string label = null) + { + var shapeStyle = new ShapeStyle { StrokeColor = "black", StrokeWidth = 2 }; + + var diagramNode = new Node + { + ID = id, + OffsetX = x, + OffsetY = y, + Width = width, + Height = height, + Style = shapeStyle, + Shape = new BasicShape { Type = NodeShapes.Basic }, + }; + + if (!string.IsNullOrEmpty(label)) + { + var annotation = new ShapeAnnotation + { + Content = label, + Style = new TextStyle { FontSize = 14 } + }; + diagramNode.Annotations.Add(annotation); + } + + nodes.Add(diagramNode); + return diagramNode; + } + + public void CreateConnector(string id, string sourceId, string targetId, int sourcePortIndex, int targetPortIndex, string strokeColor = null) + { + string color = !string.IsNullOrEmpty(strokeColor) ? strokeColor : "green"; + if (color == "lightGreen") + { + color = "#1AD81A"; + } + else if (color == "green") + { + color = "#005100"; + } + + var diagramConnector = new Connector + { + ID = id, + SourceID = sourceId, + TargetID = targetId, + SourcePortID = sourceId + "out" + sourcePortIndex, + TargetPortID = targetId + "in" + targetPortIndex, + Style = new ShapeStyle { StrokeColor = color, StrokeWidth = 2 }, + TargetDecorator = new DecoratorSettings { Shape = DecoratorShape.None } + }; + connectors.Add(diagramConnector); + } + + private void Created() + { + diagram.FitToPage(); + } + + private void ConnectorCreating(IDiagramObject @object) + { + if (@object is Connector connector) + { + connector.CornerRadius = 5; + connector.Type = ConnectorSegmentType.Orthogonal; + connector.Style.StrokeColor = "green"; + connector.Style.StrokeWidth = 2; + } + } + +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Interaction/ClassicLineRouting.razor b/Diagram/Server/Pages/Connectors/Interaction/ClassicLineRouting.razor new file mode 100644 index 0000000..6060460 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/ClassicLineRouting.razor @@ -0,0 +1,36 @@ +@page "/ClassicLineRouting" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + // Set the type of the routing + RoutingTypes routingTypes = RoutingTypes.Classic; + // Enable routing constraints for diagram. + DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + // Intialize the node collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + // Intialize the connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node() { ID = "node1", OffsetX = 100, OffsetY = 300, Width = 100, Height =100 }, + new Node() { ID = "node2", OffsetX = 600, OffsetY = 100, Width = 100, Height = 100 }, + new Node() { ID = "node3", OffsetX = 400, OffsetY = 250, Width = 100, Height = 100 } + }; + connectors = new DiagramObjectCollection(){ + new Connector() + { + ID = "connector1", + SourceID = "node1", TargetID = "node2", + Type = ConnectorSegmentType.Orthogonal + } + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Interaction/ConnectorSplitting.razor b/Diagram/Server/Pages/Connectors/Interaction/ConnectorSplitting.razor new file mode 100644 index 0000000..d5f666a --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/ConnectorSplitting.razor @@ -0,0 +1,71 @@ +@page "/ConnectorSplitting" + +@using Syncfusion.Blazor.Diagram + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + // Initialize diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() { + new Node() { OffsetX = 100, + OffsetY = 100, + Height = 50, + Width = 100, + ID = "node1", + Style = new ShapeStyle(){ Fill = "#6495ED", + StrokeColor = "#6495ED",}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }, + new Node() { OffsetX = 300, + OffsetY = 300, + Height = 50, + Width = 100, + ID = "node2", + Style = new ShapeStyle(){ Fill = "#6495ED", + StrokeColor = "#6495ED",}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }, + new Node() { OffsetX = 300, + OffsetY = 100, + Height = 50, + Width = 100, + ID = "node3", + Style = new ShapeStyle(){ Fill = "#6495ED", + StrokeColor = "#6495ED",}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + } + }; + Connector Connector = new Connector() + { + ID = "connector1", + //Source node id of the connector. + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + //Target node id of the connector. + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + // Type of the connector + Type = ConnectorSegmentType.Straight, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.AllowDrop, + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Interaction/DefaultRouting.razor b/Diagram/Server/Pages/Connectors/Interaction/DefaultRouting.razor new file mode 100644 index 0000000..f5ee8d4 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/DefaultRouting.razor @@ -0,0 +1,51 @@ +@page "/DefaultRouting" + +@using Syncfusion.Blazor.Diagram + + + + +@code { + // Enable routing constraints for diagram + DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + //Intialize the node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Intialize the connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node() { ID = "node1", OffsetX = 100, OffsetY = 300, Width = 100, Height =100 }, + new Node() { ID = "node2", OffsetX = 600, OffsetY = 100, Width = 100, Height = 100 }, + new Node() { ID = "node3", OffsetX = 400, OffsetY = 250, Width = 100, Height = 100 } + }; + connectors = new DiagramObjectCollection(){ + new Connector() + { + ID = "connector1", + SourceID = "node1", TargetID = "node2", + Type = ConnectorSegmentType.Orthogonal + } + }; + } + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Node node) + { + node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; + } + } + private void OnConnectorCreating(IDiagramObject obj) + { + if (obj is Connector connector) + { + connector.Style = new ShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 1 }; + connector.TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", StrokeWidth = 1 } + }; + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Interaction/Drag.razor b/Diagram/Server/Pages/Connectors/Interaction/Drag.razor new file mode 100644 index 0000000..9b1b7b9 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/Drag.razor @@ -0,0 +1,56 @@ +@page "/Drag" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + //Intialize the connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Dictionary ConnectorInfo = new Dictionary(); + ConnectorInfo.Add("connectorInfo", "Central Connector"); + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "black", + StrokeColor = "black", + StrokeWidth = 1 + } + }, + Style = new ShapeStyle() + { + StrokeColor = "black", + StrokeWidth = 1 + }, + AdditionalInfo = ConnectorInfo + }; + connectors.Add(Connector); + } + public void OnDrag() + { + // Drag the connector + Diagram.Drag(Diagram.Connectors[0], 10, 10); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Interaction/EndPointDragging.razor b/Diagram/Server/Pages/Connectors/Interaction/EndPointDragging.razor new file mode 100644 index 0000000..b6caf49 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/EndPointDragging.razor @@ -0,0 +1,53 @@ +@page "/EndPointDragging" + +@using Syncfusion.Blazor.Diagram + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + //Intialize the diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Dictionary ConnectorInfo = new Dictionary(); + ConnectorInfo.Add("connectorInfo", "Central Connector"); + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Circle, + Style = new ShapeStyle() + { + Fill = "red", + StrokeColor = "red", + StrokeWidth = 1 + } + }, + SourceDecorator=new DecoratorSettings() + { + Shape = DecoratorShape.Circle, + Style = new ShapeStyle() + { + Fill = "red", + StrokeColor = "red", + StrokeWidth = 1 + } + }, + AdditionalInfo = ConnectorInfo + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Interaction/LineRoutingSettings.razor b/Diagram/Server/Pages/Connectors/Interaction/LineRoutingSettings.razor new file mode 100644 index 0000000..1972063 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/LineRoutingSettings.razor @@ -0,0 +1,38 @@ +@page "/LineRoutingSettings" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + // Set the type of the routing + RoutingTypes routingTypes = RoutingTypes.Advanced; + // Set the padding for the obstable + double padding = 20; + // Enable routing constraints for diagram. + DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + // Intialize the node collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + // Intialize the connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node() { ID = "node1", OffsetX = 100, OffsetY = 300, Width = 100, Height =100 }, + new Node() { ID = "node2", OffsetX = 600, OffsetY = 100, Width = 100, Height = 100 }, + new Node() { ID = "node3", OffsetX = 400, OffsetY = 250, Width = 100, Height = 100 } + }; + connectors = new DiagramObjectCollection(){ + new Connector() + { + ID = "connector1", + SourceID = "node1", TargetID = "node2", + Type = ConnectorSegmentType.Orthogonal + } + }; + } +} diff --git a/Diagram/Server/Pages/Connectors/Interaction/NodeRoutingObstable.razor b/Diagram/Server/Pages/Connectors/Interaction/NodeRoutingObstable.razor new file mode 100644 index 0000000..ed7027a --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/NodeRoutingObstable.razor @@ -0,0 +1,51 @@ +@page "/NodeRoutingObstable" + +@using Syncfusion.Blazor.Diagram + + + + +@code { + // Enable routing constraints for diagram + DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + //Intialize the node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Intialize the connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node() { ID = "node1", OffsetX = 100, OffsetY = 300, Width = 100, Height =100 }, + new Node() { ID = "node2", OffsetX = 600, OffsetY = 100, Width = 100, Height = 100 }, + new Node() { ID = "node3", OffsetX = 400, OffsetY = 250, Width = 100, Height = 100 } + }; + connectors = new DiagramObjectCollection(){ + new Connector() + { + ID = "connector1", + SourceID = "node1", TargetID = "node2", + Type = ConnectorSegmentType.Orthogonal + } + }; + } + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Node node) + { + node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; + } + } + private void OnConnectorCreating(IDiagramObject obj) + { + if (obj is Connector connector) + { + connector.Style = new ShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 1 }; + connector.TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", StrokeWidth = 1 } + }; + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Interaction/ObstaclePadding.razor b/Diagram/Server/Pages/Connectors/Interaction/ObstaclePadding.razor new file mode 100644 index 0000000..2bfc55c --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/ObstaclePadding.razor @@ -0,0 +1,39 @@ +@page "/ObstaclePadding" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + // Set the type of the routing + RoutingTypes routingTypes = RoutingTypes.Advanced; + // Set the padding for the obstable + double padding = 12; + // Enable routing constraints for diagram. + DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + // Intialize the node collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + // Intialize the connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node() { ID = "node1", OffsetX = 100, OffsetY = 300, Width = 100, Height =100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Source" } } }, + new Node() { ID = "node2", OffsetX = 430, OffsetY = 130, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Target" } } }, + new Node() { ID = "node3", OffsetX = 430, OffsetY = 250, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Obstacle 1" } } }, + new Node() { ID = "node4", OffsetX = 150, OffsetY = 90, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Obstacle 2" } } } + }; + connectors = new DiagramObjectCollection(){ + new Connector() + { + ID = "connector1", + SourceID = "node1", TargetID = "node2", + Type = ConnectorSegmentType.Orthogonal + } + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Interaction/RoutingConstraints.razor b/Diagram/Server/Pages/Connectors/Interaction/RoutingConstraints.razor new file mode 100644 index 0000000..f3f667d --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/RoutingConstraints.razor @@ -0,0 +1,66 @@ +@page "/RoutingConstraints" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + // Enable routing constraints for the diagram. + DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + //Intialize the node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Intialize the connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node() { ID = "Source", OffsetX = 90, OffsetY = 290, Width = 100, Height =100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Source1" } }, Ports=new DiagramObjectCollection(){ new PointPort(){ ID="port1", Offset=new DiagramPoint() { X = 1, Y = 0.5 } } } }, + new Node() { ID = "Target", OffsetX = 700, OffsetY = 304, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Target1" } }, Ports=new DiagramObjectCollection(){ new PointPort(){ ID="port1", Offset=new DiagramPoint() { X = 0, Y = 0.5 } } } }, + new Node() { ID = "Source2", OffsetX = 120, OffsetY = 150, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Source2" } }, }, + new Node() { ID = "Target2", OffsetX = 490, OffsetY = 250, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Target2" } } }, + new Node() { ID = "Obstacle", OffsetX = 291, OffsetY = 300, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Obstacle" } }, }, + }; + connectors = new DiagramObjectCollection(){ + new Connector() + { + ID = "connector1", + SourceID = "Source", TargetID = "Target", + Type = ConnectorSegmentType.Orthogonal, + // Disable the inherit routing for the connector + Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.InheritRouting, + Annotations = new DiagramObjectCollection(){ new PathAnnotation(){ Content = "Without Routing" } } + }, + new Connector() + { + ID = "connector2", + SourceID = "Source2", TargetID = "Target2", + Type = ConnectorSegmentType.Orthogonal, + // Enable the routing for the connector + Constraints = (ConnectorConstraints.Default & ~ConnectorConstraints.InheritRouting) | ConnectorConstraints.Routing, + Annotations = new DiagramObjectCollection(){ new PathAnnotation(){ Content = "With Routing" } } + } + }; + } + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Node node) + { + node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; + } + } + private void OnConnectorCreating(IDiagramObject obj) + { + if (obj is Connector connector) + { + connector.Style = new ShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 1 }; + connector.TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", StrokeWidth = 1 } + }; + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Interaction/Select.razor b/Diagram/Server/Pages/Connectors/Interaction/Select.razor new file mode 100644 index 0000000..68bac88 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Interaction/Select.razor @@ -0,0 +1,64 @@ +@page "/Select" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Buttons + + + + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + //Intialize the diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Dictionary ConnectorInfo = new Dictionary(); + ConnectorInfo.Add("connectorInfo", "Central Connector"); + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() + { + X = 200, + Y = 200 + }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 1 + } + }, + Style = new ShapeStyle() + { + StrokeColor = "#6495ED", + StrokeWidth = 1 + }, + AdditionalInfo = ConnectorInfo + }; + connectors.Add(Connector); + } + public void OnSelect() + { + // Select the Connector + Diagram.Select(new ObservableCollection { Diagram.GetObject(Diagram.Connectors[0].ID) as IDiagramObject }); + } + public void UnSelect() + { + // clear selection in the diagram + Diagram.ClearSelection(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Segments/Bezier.razor b/Diagram/Server/Pages/Connectors/Segments/Bezier.razor new file mode 100644 index 0000000..bb274e3 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/Bezier.razor @@ -0,0 +1,39 @@ +@page "/Bezier" + +@using Syncfusion.Blazor.Diagram + + +@code { + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + Type = ConnectorSegmentType.Bezier, + + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6f409f", + StrokeColor = "#6f409f", + StrokeWidth = 1 + } + } + + }; + //Add the connector into connectors's collection. + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Segments/BezierSegmentShape.razor b/Diagram/Server/Pages/Connectors/Segments/BezierSegmentShape.razor new file mode 100644 index 0000000..b37221d --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/BezierSegmentShape.razor @@ -0,0 +1,38 @@ +@page "/BezierSegmentShape" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.Internal + + +@code { + //Define the diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector connector = new Connector() + { + ID = "connector", + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 300, Y =300 }, + SourceDecorator = new DecoratorSettings() { Shape = DecoratorShape.Diamond }, + Segments = new DiagramObjectCollection() + { + new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 200, Y = 100} + , + }, + new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 260, Y = 150}} + }, + Type = ConnectorSegmentType.Bezier, + BezierConnectorSettings = new BezierConnectorSettings() + { + ControlPointsVisibility = ControlPointsVisibility.All + + }, + + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square }, + }; + connectors.Add(connector); + + } + +} diff --git a/Diagram/Server/Pages/Connectors/Segments/MultipleSegments.razor b/Diagram/Server/Pages/Connectors/Segments/MultipleSegments.razor new file mode 100644 index 0000000..8258576 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/MultipleSegments.razor @@ -0,0 +1,40 @@ +@page "/MultipleSegments" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + + Connector connector1 = new Connector() + { + ID = "Connector1", + Type = ConnectorSegmentType.Orthogonal, + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() { X = 300, Y = 200 }, + Segments = new DiagramObjectCollection(){ + new OrthogonalSegment { + Length = 100, + Type = ConnectorSegmentType.Orthogonal, + Direction = Direction.Right, }, + new OrthogonalSegment { + Length = 100, + Type = ConnectorSegmentType.Orthogonal, + Direction = Direction.Bottom, } }, + }; + + //Add the connector into connectors's collection. + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Segments/Orthogonal.razor b/Diagram/Server/Pages/Connectors/Segments/Orthogonal.razor new file mode 100644 index 0000000..1715b5e --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/Orthogonal.razor @@ -0,0 +1,38 @@ +@page "/Orthogonal" + +@using Syncfusion.Blazor.Diagram + + +@code { + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + //Specify the segments type as Orthogonal. + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6f409f", + StrokeColor = "#6f409f", + StrokeWidth = 1 + } + } + + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Segments/OrthogonalSegmentEditing.razor b/Diagram/Server/Pages/Connectors/Segments/OrthogonalSegmentEditing.razor new file mode 100644 index 0000000..02e13ac --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/OrthogonalSegmentEditing.razor @@ -0,0 +1,28 @@ +@page "/OrthogonalSegmentEditing" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + // Initialize diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + // Enable the segment editing. + { + ID = "Connector2", + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + Type = ConnectorSegmentType.Orthogonal, + SourcePoint = new DiagramPoint { X = 400, Y = 100 }, + TargetPoint = new DiagramPoint { X = 500, Y = 200 } + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Segments/OrthogonalThumbSetting.razor b/Diagram/Server/Pages/Connectors/Segments/OrthogonalThumbSetting.razor new file mode 100644 index 0000000..9873567 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/OrthogonalThumbSetting.razor @@ -0,0 +1,26 @@ +@page "/OrthogonalThumbSetting" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + SfDiagramComponent Diagram; + DiagramObjectCollection connectors = new DiagramObjectCollection(); + SegmentThumbSettings segmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Fletch }; + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "Connector2", + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape, + Type = ConnectorSegmentType.Orthogonal, + SourcePoint = new DiagramPoint { X = 400, Y = 100 }, + TargetPoint = new DiagramPoint { X = 500, Y = 200 } + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Segments/OrthogonalThumbShape.razor b/Diagram/Server/Pages/Connectors/Segments/OrthogonalThumbShape.razor new file mode 100644 index 0000000..60c85fa --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/OrthogonalThumbShape.razor @@ -0,0 +1,26 @@ +@page "/OrthogonalThumbShape" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + SfDiagramComponent Diagram; + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "Connector2", + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + Type = ConnectorSegmentType.Orthogonal, + SourcePoint = new DiagramPoint { X = 400, Y = 100 }, + TargetPoint = new DiagramPoint { X = 500, Y = 200 }, + SegmentThumbSettings = new SegmentThumbSettings() {Shape = SegmentThumbShapes.IndentedArrow} + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Segments/SegmentShape.razor b/Diagram/Server/Pages/Connectors/Segments/SegmentShape.razor new file mode 100644 index 0000000..c314718 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/SegmentShape.razor @@ -0,0 +1,38 @@ +@page "/SegmentShape" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.Internal + + +@code { + //Define the diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector connector = new Connector() + { + ID = "connector", + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 300, Y = 300 }, + SourceDecorator = new DecoratorSettings() { Shape = DecoratorShape.Diamond }, + Segments = new DiagramObjectCollection() + { + new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 200, Y = 100} + , + }, + new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 260, Y = 150}} + }, + Type = ConnectorSegmentType.Bezier, + BezierConnectorSettings = new BezierConnectorSettings() + { + ControlPointsVisibility = ControlPointsVisibility.All + + }, + + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square }, + }; + connectors.Add(connector); + + } + +} diff --git a/Diagram/Server/Pages/Connectors/Segments/Straight.razor b/Diagram/Server/Pages/Connectors/Segments/Straight.razor new file mode 100644 index 0000000..9b7ca40 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/Straight.razor @@ -0,0 +1,38 @@ +@page "/Straight" + +@using Syncfusion.Blazor.Diagram + + +@code { + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + //Specify the segments typs as straight. + Type = ConnectorSegmentType.Straight, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6f409f", + StrokeColor = "#6f409f", + StrokeWidth = 1 + } + } + + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Segments/StraightSegmentEditing.razor b/Diagram/Server/Pages/Connectors/Segments/StraightSegmentEditing.razor new file mode 100644 index 0000000..8621533 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/StraightSegmentEditing.razor @@ -0,0 +1,35 @@ +@page "/StraightSegmentEditing" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + // Initialize diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "Connector1", + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + SourcePoint = new DiagramPoint { X = 200, Y = 100 }, + TargetPoint = new DiagramPoint { X = 340, Y = 150 }, + // Enable the segment editing. + Segments = new DiagramObjectCollection + { + new StraightSegment() + { + Type = ConnectorSegmentType.Straight, + Point = new DiagramPoint { X = 300, Y = 200 } + } + } + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Connectors/Segments/StraightSegmentShape.razor b/Diagram/Server/Pages/Connectors/Segments/StraightSegmentShape.razor new file mode 100644 index 0000000..90e048b --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/StraightSegmentShape.razor @@ -0,0 +1,34 @@ +@page "/StraightSegmentShape" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.Internal + + +@code { + + DiagramObjectCollection connectors = new DiagramObjectCollection(); + SegmentThumbSettings connectorSegmentThumb = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Rectangle }; + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "Connector", + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape, + SourcePoint = new DiagramPoint { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint { X = 250, Y = 250 }, + + Segments = new DiagramObjectCollection + { + new StraightSegment() + { + Type = ConnectorSegmentType.Straight, + Point = new DiagramPoint { X = 180, Y = 180 } + } + }, + + }; + connectors.Add(Connector); + + + } +} + diff --git a/Diagram/Server/Pages/Connectors/Segments/StraightSegmentShape1.razor b/Diagram/Server/Pages/Connectors/Segments/StraightSegmentShape1.razor new file mode 100644 index 0000000..4eb90a5 --- /dev/null +++ b/Diagram/Server/Pages/Connectors/Segments/StraightSegmentShape1.razor @@ -0,0 +1,35 @@ +@page "/StraightSegmentShape1" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.Internal + + + +@code { + + //Define the diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "Connector", + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + SourcePoint = new DiagramPoint { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint { X = 250, Y = 250 }, + + Segments = new DiagramObjectCollection + { + new StraightSegment() + { + Type = ConnectorSegmentType.Straight, + Point = new DiagramPoint { X = 180, Y = 180 } + } + }, + SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square }, + + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/AddOperation.razor b/Diagram/Server/Pages/Constraints/AddOperation.razor new file mode 100644 index 0000000..1c8f887 --- /dev/null +++ b/Diagram/Server/Pages/Constraints/AddOperation.razor @@ -0,0 +1,11 @@ +@page "/AddOperation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //To adding line routing constraint with default contraints. + DiagramConstraints diagramConstraint = DiagramConstraints.Default | DiagramConstraints.Bridging; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/AnnotationConstraints.razor b/Diagram/Server/Pages/Constraints/AnnotationConstraints.razor new file mode 100644 index 0000000..9527c60 --- /dev/null +++ b/Diagram/Server/Pages/Constraints/AnnotationConstraints.razor @@ -0,0 +1,45 @@ +@page "/AnnotationConstraints" + +@using Syncfusion.Blazor.Diagram + +@* Initialize the diagram with NodeCollection *@ + + +@code +{ + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Initialize the NodeCollection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + }; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + ID="annotation1", + Content="Annotation Text Wrapping", + // Sets the Constraints for Annotation... + Constraints=AnnotationConstraints.ReadOnly, + Style= new TextStyle() + { + Color="#000000", + Fill="Transparent", + FontFamily="TimesNewRoman", + FontSize=12, + Bold=true, + Italic=true + }, + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/BoundaryConstraints.razor b/Diagram/Server/Pages/Constraints/BoundaryConstraints.razor new file mode 100644 index 0000000..c67b566 --- /dev/null +++ b/Diagram/Server/Pages/Constraints/BoundaryConstraints.razor @@ -0,0 +1,28 @@ +@page "/BoundaryConstraints" + +@using Syncfusion.Blazor.Diagram + + + @* Initialize the pagesettings with boundary constraints *@ + + + +@code +{ + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Initialize the NodeCollection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/ConnectorConstraints.razor b/Diagram/Server/Pages/Constraints/ConnectorConstraints.razor new file mode 100644 index 0000000..d3195ba --- /dev/null +++ b/Diagram/Server/Pages/Constraints/ConnectorConstraints.razor @@ -0,0 +1,28 @@ +@page "/ConnectorConstraints" + +@using Syncfusion.Blazor.Diagram + +@* Initialize the diagram with connectors *@ + + + +@code +{ + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + //Initialize the connector collection + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + ID = "connector1", + Type = ConnectorSegmentType.Straight, + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + //sets the ConnectorConstraints... + Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.Select + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/DiagramConstraints.razor b/Diagram/Server/Pages/Constraints/DiagramConstraints.razor new file mode 100644 index 0000000..13894de --- /dev/null +++ b/Diagram/Server/Pages/Constraints/DiagramConstraints.razor @@ -0,0 +1,29 @@ +@page "/DiagramConstraints" + +@using Syncfusion.Blazor.Diagram + +@* Initialize the diagram with constraints *@ + + +@code +{ + //sets the Diagram constraints... + DiagramConstraints DiagramConstraints = DiagramConstraints.Default & ~DiagramConstraints.PageEditable; + //Initialize the Nodes Collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/InheritBehaviors.razor b/Diagram/Server/Pages/Constraints/InheritBehaviors.razor new file mode 100644 index 0000000..30dd8ab --- /dev/null +++ b/Diagram/Server/Pages/Constraints/InheritBehaviors.razor @@ -0,0 +1,37 @@ +@page "/InheritBehaviors" + +@using Syncfusion.Blazor.Diagram + +@* Initialize the diagram with constraints *@ + + + +@code +{ + //Sets the diagram constraints + DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + //sets the ConnectorConstraints... + Constraints = ConnectorConstraints.Default | ConnectorConstraints.InheritBridging + }; + Connector connector1 = new Connector() + { + ID = "connector2", + SourcePoint = new DiagramPoint() { X = 200, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 100, Y = 200 }, + }; + connectors.Add(connector); + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/NodeConstraints.razor b/Diagram/Server/Pages/Constraints/NodeConstraints.razor new file mode 100644 index 0000000..4e63fc9 --- /dev/null +++ b/Diagram/Server/Pages/Constraints/NodeConstraints.razor @@ -0,0 +1,30 @@ +@page "/NodeConstraints" + +@using Syncfusion.Blazor.Diagram + +@* Initialize the diagram with NodeCollection *@ + + +@code +{ + + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Intialize the node collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "White" }, + //Sets the NodeConstraints constraints. + Constraints = NodeConstraints.Default & ~NodeConstraints.Rotate + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/PortConstraints.razor b/Diagram/Server/Pages/Constraints/PortConstraints.razor new file mode 100644 index 0000000..dafa4b1 --- /dev/null +++ b/Diagram/Server/Pages/Constraints/PortConstraints.razor @@ -0,0 +1,38 @@ +@page "/PortConstraints" + +@using Syncfusion.Blazor.Diagram + +@* Initialize the diagram with NodeCollection *@ + + +@code +{ + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Initialize the NodeCollection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + }; + node.Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="port1", + Offset=new DiagramPoint(){X=0,Y=0.5}, + Shape=PortShapes.Circle, + Visibility=PortVisibility.Visible, + // Sets the PortConstraints... + Constraints=PortConstraints.None + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/RemoveOperation.razor b/Diagram/Server/Pages/Constraints/RemoveOperation.razor new file mode 100644 index 0000000..0ac9b8f --- /dev/null +++ b/Diagram/Server/Pages/Constraints/RemoveOperation.razor @@ -0,0 +1,12 @@ +@page "/RemoveOperation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //To removing zoom and panning constraints from the default contraints + //It has disabled zoom and panning funcationality for the diagram. + DiagramConstraints diagramConstraint = DiagramConstraints.Default & ~(DiagramConstraints.Zoom | DiagramConstraints.Pan); +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/SelectorConstraints.razor b/Diagram/Server/Pages/Constraints/SelectorConstraints.razor new file mode 100644 index 0000000..3a98190 --- /dev/null +++ b/Diagram/Server/Pages/Constraints/SelectorConstraints.razor @@ -0,0 +1,30 @@ +@page "/SelectorConstraints" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + DiagramObjectCollection nodes; + public DiagramSelectionSettings selectedItems = new DiagramSelectionSettings() + { + Constraints = SelectorConstraints.All & ~SelectorConstraints.Rotate + }; + + protected override void OnInitialized() + { + //Initialize the NodeCollection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + OffsetX = 100, + OffsetY = 100, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Constraints/SnapConstraints.razor b/Diagram/Server/Pages/Constraints/SnapConstraints.razor new file mode 100644 index 0000000..707019a --- /dev/null +++ b/Diagram/Server/Pages/Constraints/SnapConstraints.razor @@ -0,0 +1,28 @@ +@page "/SnapConstraints" + +@using Syncfusion.Blazor.Diagram + + + @* Initialize the snapsettings with constraints *@ + + + +@code +{ + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Initialize the NodeCollection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Container/ContainerHeaderSample.razor b/Diagram/Server/Pages/Container/ContainerHeaderSample.razor new file mode 100644 index 0000000..ef36ce5 --- /dev/null +++ b/Diagram/Server/Pages/Container/ContainerHeaderSample.razor @@ -0,0 +1,70 @@ +@page "/ContainerHeaderSample" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + public SfDiagramComponent diagram; + //Initialize the node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Height = 60, + Width = 100, + OffsetX = 400, + OffsetY = 300, + Style = new ShapeStyle() + { + Fill = "CornflowerBlue", + StrokeColor = "transparent" + } + }; + Node node2 = new Node() + { + ID = "node2", + Height = 60, + Width = 100, + OffsetX = 600, + OffsetY = 300, + Style = new ShapeStyle() + { + Fill = "CornflowerBlue", + StrokeColor = "transparent" + } + }; + Container container = new Container() + { + ID = "container", + Header = new ContainerHeader() + { + ID = "containerHeader", + Height = 40, + Annotation = new ShapeAnnotation() + { + Content = "Container Title", + Style = new TextStyle() { FontSize = 18, Bold = true, Color = "#343434" } + }, + Style = new TextStyle() + { + Fill = "CornflowerBlue" + } + }, + Height = 300, + Width = 500, + OffsetX = 500, + OffsetY = 300, + Children = new string[] { "node1", "node2" } + }; + nodes.Add(node1); + nodes.Add(node2); + nodes.Add(container); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Container/ContainerNode.razor b/Diagram/Server/Pages/Container/ContainerNode.razor new file mode 100644 index 0000000..478bdf7 --- /dev/null +++ b/Diagram/Server/Pages/Container/ContainerNode.razor @@ -0,0 +1,27 @@ +@page "/ContainerNode" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + public SfDiagramComponent diagram; + //Initialize the node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Container container = new Container() + { + ID = "container", + Height = 300, + Width = 500, + OffsetX = 500, + OffsetY = 300, + }; + nodes.Add(container); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Container/ContainerPalette.razor b/Diagram/Server/Pages/Container/ContainerPalette.razor new file mode 100644 index 0000000..46340c3 --- /dev/null +++ b/Diagram/Server/Pages/Container/ContainerPalette.razor @@ -0,0 +1,82 @@ +@page "/ContainerPalette" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SfSymbolPaletteComponent symbolpalette; + //Define symbol margin. + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + //Define palattes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's container-shape collection. + DiagramObjectCollection ContainerNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + Palettes = new DiagramObjectCollection(); + + ContainerNodes = new DiagramObjectCollection(); + + // Create container with header + Container container = new Container() + { + ID = "containerWithHeader", + Header = new ContainerHeader() + { + ID = "containerHeader", + Height = 50, + Annotation = new ShapeAnnotation() + { + Content = "Container Title" + }, + Style = new TextStyle() + { + Fill = "CornflowerBlue" + } + }, + Height = 300, + Width = 300, + OffsetX = 100, + OffsetY = 100, + }; + + // Create container without header. + Container containerWithoutHeader = new Container() + { + ID = "containerWithoutHeader", + Height = 300, + Width = 300, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "CornflowerBlue" } + }; + + ContainerNodes = new DiagramObjectCollection() + { + container, + containerWithoutHeader, + }; + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =ContainerNodes,Title="Container Shapes",ID="ContainerShapes" }, + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Container/ContainerSample.razor b/Diagram/Server/Pages/Container/ContainerSample.razor new file mode 100644 index 0000000..a5e15aa --- /dev/null +++ b/Diagram/Server/Pages/Container/ContainerSample.razor @@ -0,0 +1,54 @@ +@page "/ContainerSample" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + public SfDiagramComponent diagram; + //Initialize the node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Height = 60, + Width = 100, + OffsetX = 400, + OffsetY = 300, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation(){ Content = "Process"} + } + }; + Node node2 = new Node() + { + ID = "node2", + Height = 60, + Width = 100, + OffsetX = 600, + OffsetY = 300, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation(){ Content = "Process"} + } + }; + Container container = new Container() + { + ID = "container", + Height = 300, + Width = 500, + OffsetX = 500, + OffsetY = 300, + Children = new string[] { "node1", "node2" } + }; + nodes.Add(node1); + nodes.Add(node2); + nodes.Add(container); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/ContextMenu/ContextMenuEvents.razor b/Diagram/Server/Pages/ContextMenu/ContextMenuEvents.razor new file mode 100644 index 0000000..1170cec --- /dev/null +++ b/Diagram/Server/Pages/ContextMenu/ContextMenuEvents.razor @@ -0,0 +1,109 @@ +@page "/ContextMenuEvents" +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + + + + + +@code +{ + //Reference to diagram + SfDiagramComponent diagram; + //Defines diagram's nodes collection + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + //Defines diagram's connector collection + public DiagramObjectCollection ConnectorCollection = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + //Create a node + Node node1 = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + Node node2 = new Node() + { + ID = "node2", + Height = 100, + Width = 100, + OffsetX = 300, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + //Add node into node's collection + NodeCollection.Add(node1); + NodeCollection.Add(node2); + + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + Type = ConnectorSegmentType.Straight, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeWidth = 2 + } + }; + ConnectorCollection.Add(connector1); + } + List contextMenuItemModels = new List() + { + new ContextMenuItem() + { + Text ="Node Color", + ID="Node", + Items = new List() + { + new ContextMenuItem(){ Text ="Red", ID="Red", }, + new ContextMenuItem(){ Text ="Yellow", ID="Yellow", }, + new ContextMenuItem(){ Text ="Green", ID="Green", } + } + }, + new ContextMenuItem() + { + Text ="Connector Color", + ID="Connector", + Items = new List() + { + new ContextMenuItem(){ Text ="Red", ID="black", }, + new ContextMenuItem(){ Text ="Yellow", ID="blue", }, + new ContextMenuItem(){ Text ="Green", ID="brown", } + } + }, + }; + // Event to notify context menu opening + public void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg) + { + if (diagram.SelectionSettings.Nodes.Count > 0) + { + arg.HiddenItems.Add("Connector"); + } + if (diagram.SelectionSettings.Connectors.Count > 0) + { + arg.HiddenItems.Add("Node"); + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/ContextMenu/ContextMenuItemClickedEvent.razor b/Diagram/Server/Pages/ContextMenu/ContextMenuItemClickedEvent.razor new file mode 100644 index 0000000..6fb353a --- /dev/null +++ b/Diagram/Server/Pages/ContextMenu/ContextMenuItemClickedEvent.razor @@ -0,0 +1,16 @@ +@page "/ContextMenuItemClickedEvent" +@using Syncfusion.Blazor.Diagram + + + + + + +@code +{ + // Defines context menu and ContextMenuItemClicked event + public void ContextMenuItemClickHandler(DiagramMenuClickEventArgs arg) + { + //Action to be performed + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/ContextMenu/ContextMenuOpenningEvent.razor b/Diagram/Server/Pages/ContextMenu/ContextMenuOpenningEvent.razor new file mode 100644 index 0000000..c6e2d56 --- /dev/null +++ b/Diagram/Server/Pages/ContextMenu/ContextMenuOpenningEvent.razor @@ -0,0 +1,16 @@ +@page "/ContextMenuOpenningEvent" +@using Syncfusion.Blazor.Diagram + + + + + + +@code +{ + // Defines context menu and ContextMenuOpening event + public void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg) + { + //Action to be performed + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/ContextMenu/ContextMenuTemplate.razor b/Diagram/Server/Pages/ContextMenu/ContextMenuTemplate.razor new file mode 100644 index 0000000..e4a3fb6 --- /dev/null +++ b/Diagram/Server/Pages/ContextMenu/ContextMenuTemplate.razor @@ -0,0 +1,108 @@ +@page "/ContextMenuTemplate" +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + + + + @context.Text + @((@context.Text == "Save As...") ? "Ctrl + S" : "") + + + + + + @code { + //Reference the diagram + SfDiagramComponent diagram; + //Define diagram nodes collection + DiagramObjectCollection nodes; + //Define diagram connectors collection + DiagramObjectCollection connectors; + + List Items; + bool customMenuOnly = false; + bool show = true; + + protected override void OnInitialized() + { + //Initialize diagram nodes collection + nodes = new DiagramObjectCollection(); + //Initialize diagram connectors collection + connectors = new DiagramObjectCollection(); + + Items = new List() + { + new ContextMenuItem() + { + Text = "Save As...", + ID = "save", + IconCss = "e-save", + }, + new ContextMenuItem() + { + Text = "Delete", + ID = "delete", + IconCss = "e-delete" + } + }; + + Node node1 = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + Node node2 = new Node() + { + ID = "node2", + Height = 100, + Width = 100, + OffsetX = 300, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + nodes.Add(node1); + nodes.Add(node2); + + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + Type = ConnectorSegmentType.Straight, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeWidth = 2 + } + }; + connectors.Add(connector1); + } +} + + \ No newline at end of file diff --git a/Diagram/Server/Pages/ContextMenu/CustomContextMenu.razor b/Diagram/Server/Pages/ContextMenu/CustomContextMenu.razor new file mode 100644 index 0000000..3afd8d0 --- /dev/null +++ b/Diagram/Server/Pages/ContextMenu/CustomContextMenu.razor @@ -0,0 +1,85 @@ +@page "/CustomContextMenu" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + + + +@code { + SfDiagramComponent diagram; + DiagramObjectCollection nodes; + DiagramObjectCollection connectors; + List Items; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + connectors = new DiagramObjectCollection(); + + Items = new List() + { + new ContextMenuItem() + { + Text = "Save As...", + ID = "save", + IconCss = "e-save", + }, + new ContextMenuItem() + { + Text = "Delete", + ID = "delete", + IconCss = "e-delete" + } + }; + + Node node1 = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + Node node2 = new Node() + { + ID = "node2", + Height = 100, + Width = 100, + OffsetX = 300, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + nodes.Add(node1); + nodes.Add(node2); + + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + Type = ConnectorSegmentType.Straight, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeWidth = 2 + } + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/ContextMenu/CustomContextMenuOnly.razor b/Diagram/Server/Pages/ContextMenu/CustomContextMenuOnly.razor new file mode 100644 index 0000000..26aea35 --- /dev/null +++ b/Diagram/Server/Pages/ContextMenu/CustomContextMenuOnly.razor @@ -0,0 +1,109 @@ +@page "/CustomContextMenuOnly" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + Show CustomMenu Only +
+ + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + //Define diagram nodes collection + DiagramObjectCollection nodes; + //Define diagram connectors collection + DiagramObjectCollection connectors; + + List Items; + bool customMenuOnly = false; + bool show = true; + + protected override void OnInitialized() + { + //Initialize the diagram nodes collection + nodes = new DiagramObjectCollection(); + //Initialize the diagram connectors collection + connectors = new DiagramObjectCollection(); + + Items = new List() +{ + new ContextMenuItem() + { + Text = "Save As...", + ID = "save", + IconCss = "e-save", + }, + new ContextMenuItem() + { + Text = "Delete", + ID = "delete", + IconCss = "e-delete" + } + }; + + Node node1 = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + Node node2 = new Node() + { + ID = "node2", + Height = 100, + Width = 100, + OffsetX = 300, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + nodes.Add(node1); + nodes.Add(node2); + + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + Type = ConnectorSegmentType.Straight, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeWidth = 2 + } + }; + connectors.Add(connector1); + } + + private void CustomMenuOnlyHandler(ChangeEventArgs args) + { + if ((bool)args.Value) + { + customMenuOnly = true; + } + else + { + customMenuOnly = false; + } + } +} + diff --git a/Diagram/Server/Pages/ContextMenu/DefaultContextMenu.razor b/Diagram/Server/Pages/ContextMenu/DefaultContextMenu.razor new file mode 100644 index 0000000..163e98b --- /dev/null +++ b/Diagram/Server/Pages/ContextMenu/DefaultContextMenu.razor @@ -0,0 +1,75 @@ +@page "/DefaultContextMenu" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + //Define diagram nodes collection + DiagramObjectCollection nodes; + //Define diagram connectors collection + DiagramObjectCollection connectors; + + bool show = true; + + protected override void OnInitialized() + { + //Intialize the diagram nodes collection + nodes = new DiagramObjectCollection(); + //Intialize the diagram connectors collection + connectors = new DiagramObjectCollection(); + + Node node1 = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + Node node2 = new Node() + { + ID = "node2", + Height = 100, + Width = 100, + OffsetX = 300, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + nodes.Add(node1); + nodes.Add(node2); + + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + Type = ConnectorSegmentType.Straight, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeWidth = 2 + } + }; + connectors.Add(connector1); + } + +} diff --git a/Diagram/Server/Pages/DataBinding/DiagramWithCustomAdaptor.razor b/Diagram/Server/Pages/DataBinding/DiagramWithCustomAdaptor.razor new file mode 100644 index 0000000..d9c5ac2 --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/DiagramWithCustomAdaptor.razor @@ -0,0 +1,213 @@ +@page "/DiagramWithCustomAdaptor" +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Data + +@*buttons to perform crud support*@ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ + + + + + +
+
+
+@functions{ + SfDiagramComponent? diagram; + public static List employeeDetails { get; set; } + public static List Details { get; set; } = new List(); + + Layout LayoutValue = new Layout() { }; + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) + { + options.EnableSubTree = true; + options.Orientation = Orientation.Horizontal; + return options; + } + private void NodeCreating(IDiagramObject obj) + { + Node? node = obj as Node; + node!.Style = new ShapeStyle() { Fill = "#659be5", StrokeColor = "none", StrokeWidth = 2, }; + node.BackgroundColor = "#659be5"; + node.Width = 200; + node.Height = 100; + EmployeeDetails data = node.Data as EmployeeDetails; + if (data != null) + { + //node.ID = data.FirstName + data.EmployeeID; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + ID = data.FirstName, + Content = $"Name:{data.FirstName}\nReportsTo:{data.ReportsTo}\nDesignation:{data.Designation}\nCountry:{data.Country}", + Style = new TextStyle(){FontSize = 15, Color = "white"} + } + }; + node.Style = new ShapeStyle() { Fill = data.Color, StrokeColor = "none", StrokeWidth = 2, }; + } + } + private void ConnectorCreating(IDiagramObject connector) + { + Connector? newConnector = connector as Connector; + newConnector!.TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.None }; + newConnector.Type = ConnectorSegmentType.Orthogonal; + newConnector.Style = new ShapeStyle() { StrokeColor = "#6d6d6d" }; + newConnector.Constraints = ConnectorConstraints.None; + newConnector.CornerRadius = 5; + } + + protected override void OnInitialized() + { + Details = new List(); + employeeDetails = new List() { + new EmployeeDetails { EmployeeID = "1", FirstName = "Andrew", Designation = "CEO", Country = "England", ReportsTo = "", Color = "Red" }, + new EmployeeDetails { EmployeeID = "2", FirstName = "Nancy", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "3", FirstName = "Janet", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "4", FirstName = "Margaret", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "5", FirstName = "Steven", Designation = "Product Manager", Country = "England", ReportsTo = "1", Color = "Blue" }, + new EmployeeDetails { EmployeeID = "7", FirstName = "Michael", Designation = "Team Lead", Country = "USA", ReportsTo = "5", Color = "Green" }, + new EmployeeDetails { EmployeeID = "8", FirstName = "Robert", Designation = "Developer", Country = "England", ReportsTo = "5", Color = "Gray" }, + new EmployeeDetails { EmployeeID = "9", FirstName = "Anne", Designation = "Developer", Country = "USA", ReportsTo = "5", Color = "Gray" }, + new EmployeeDetails { EmployeeID = "6", FirstName = "Laura", Designation = "HR", Country = "USA", ReportsTo = "1", Color = "Purple" }, + }; + + } + + public class EmployeeDetails + { + public string EmployeeID { get; set; } + + public string ReportsTo { get; set; } + + public string FirstName { get; set; } + + public string Designation { get; set; } + + public string Country { get; set; } + + public string Color { get; set; } + } + + + // Implementing custom adaptor by extending the DataAdaptor class + public class CustomAdaptor : DataAdaptor + { + // Performs data Read operation + public override object Read(DataManagerRequest dm, string key = null) + { + IEnumerable DataSource = employeeDetails; + if (dm.Search != null && dm.Search.Count > 0) + { + // Searching + DataSource = DataOperations.PerformSearching(DataSource, dm.Search); + } + if (dm.Sorted != null && dm.Sorted.Count > 0) + { + // Sorting + DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted); + } + if (dm.Where != null && dm.Where.Count > 0) + { + // Filtering + DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); + } + int count = DataSource.Cast().Count(); + if (dm.Skip != 0) + { + //Paging + DataSource = DataOperations.PerformSkip(DataSource, dm.Skip); + } + if (dm.Take != 0) + { + DataSource = DataOperations.PerformTake(DataSource, dm.Take); + } + return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource; + } + + // Performs Insert operation + public override object Insert(DataManager dm, object value, string key) + { + employeeDetails.Insert(employeeDetails.Count, value as EmployeeDetails); + return value; + } + + // Performs Remove operation + public override object Remove(DataManager dm, object value, string keyField, string key) + { + employeeDetails.Remove(employeeDetails.Where(or => or.EmployeeID == value.ToString()).FirstOrDefault()); + return value; + } + + // Performs Update operation + public override object Update(DataManager dm, object value, string keyField, string key) + { + var data = employeeDetails.Where(or => or.EmployeeID == (value as EmployeeDetails).EmployeeID).FirstOrDefault(); + if (data != null) + { + data.EmployeeID = (value as EmployeeDetails).EmployeeID; + data.ReportsTo = (value as EmployeeDetails).ReportsTo; + data.FirstName = (value as EmployeeDetails).FirstName; + data.Designation = (value as EmployeeDetails).Designation; + data.Country = (value as EmployeeDetails).Country; + data.Color = (value as EmployeeDetails).Color; + } + return value; + } + + } + + public void Read() + { + Details = new List(); + Details = diagram.ReadDataAsync().Result as List; + } + + public async void Update() + { + EmployeeDetails employeeDetails = new EmployeeDetails { EmployeeID = "1", FirstName = "AndrewSimonds", Designation = "CEO", Country = "Australia", ReportsTo = "", Color = "Red" }; + await diagram.UpdateDataAsync("EmployeeID", employeeDetails); + } + + public async void Insert() + { + EmployeeDetails employeeDetails = new EmployeeDetails() + { + EmployeeID = "10", + FirstName = "Alan", + Designation = "HR assistant", + Country = "USA", + ReportsTo = "6", + Color = "Purple" + }; + await diagram.InsertDataAsync(employeeDetails); + + } + + public async void Delete() + { + await diagram.DeleteDataAsync("EmployeeID", "6"); + } +} diff --git a/Diagram/Server/Pages/DataBinding/DiagramWithRemoteData.razor b/Diagram/Server/Pages/DataBinding/DiagramWithRemoteData.razor new file mode 100644 index 0000000..73b50e0 --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/DiagramWithRemoteData.razor @@ -0,0 +1,146 @@ +@page "/" +@using Syncfusion.Blazor.Data +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Diagram +@using DiagramWithRemoteData.Controllers + +@*buttons to perform crud support*@ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + + + + + + + + +
+@functions{ + SfDiagramComponent? diagram; + public static List employeeDetails { get; set; } + + + Layout LayoutValue = new Layout() { }; + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) + { + options.EnableSubTree = true; + options.Orientation = Orientation.Horizontal; + return options; + } + private void NodeCreating(IDiagramObject obj) + { + Node? node = obj as Node; + node.Width = 200; + node.Height = 100; + Dictionary data = node.Data as Dictionary; + if (data != null) + { + node.Annotations = new DiagramObjectCollection() +{ + new ShapeAnnotation() + { + Content = $"Name:{data["Name"]}\nReportsTo:{data["ReportsTo"]}\nDesignation:{data["Designation"]}", + } + }; + } + } + private void ConnectorCreating(IDiagramObject connector) + { + Connector? newConnector = connector as Connector; + newConnector!.TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.None }; + newConnector.Type = ConnectorSegmentType.Orthogonal; + newConnector.Style = new ShapeStyle() { StrokeColor = "#6d6d6d" }; + newConnector.Constraints = ConnectorConstraints.None; + newConnector.CornerRadius = 5; + } + + + public class EmployeeDetails + { + public int EmployeeID { get; set; } + + public string ReportsTo { get; set; } + + public string Name { get; set; } + + public string Designation { get; set; } + + public string Colour { get; set; } + } + + + public async void Read() + { + var data = await diagram.ReadDataAsync(); + } + + public async void Update() + { + EmployeeDetails employeeDetails1 = new EmployeeDetails() + { + EmployeeID = 6, + Name = "Michael", + Designation = "Team Lead", + ReportsTo = "1", + Colour = "Orange" + }; + EmployeeDetails employeeDetails = new EmployeeDetails() + { + EmployeeID = 6, + Name = "Michael", + Designation = "Product Manager", + ReportsTo = "1", + Colour = "Green" + }; + Dictionary propoerties = new Dictionary() + { + {"Designation","Product Manager" }, + {"Colour","Green" }, + {"ReportsTo", "1" } + }; + await diagram.UpdateDataAsync("EmployeeID", employeeDetails, "Employees"); + } + + + public async void Insert() + { + EmployeeDetails employeeDetails = new EmployeeDetails() + { + EmployeeID = 11, + Name = "Alan", + Designation = "HR assistant", + ReportsTo = "9", + Colour = "Gray" + }; + await diagram.InsertDataAsync(employeeDetails, "Employees"); + + } + + public async void Delete() + { + await diagram.DeleteDataAsync("EmployeeID", 5); + } + + +} + diff --git a/Diagram/Server/Pages/DataBinding/DynamicObj.razor b/Diagram/Server/Pages/DataBinding/DynamicObj.razor new file mode 100644 index 0000000..d86f1f2 --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/DynamicObj.razor @@ -0,0 +1,190 @@ +@page "/DynamicObj" + +@using Syncfusion.Blazor.Diagram +@using System.Dynamic + + +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + SfDiagramComponent Diagram; + // Specify the layout type. + LayoutType type = LayoutType.HierarchicalTree; + // Specify the orientation of the layout. + LayoutOrientation orientation = LayoutOrientation.TopToBottom; + HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + int HorizontalSpacing = 30; + int VerticalSpacing = 30; + public List DataSource { get; set; } + public List ExpandoData = new List(); + + // Defines the connector's default values. + private void ConnectorDefaults(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; + (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6d6d6d" }; + (connector as Connector).Constraints = 0; + (connector as Connector).CornerRadius = 5; + } + + // Create the layout info. + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) + { + // Enable the sub-tree. + options.EnableSubTree = true; + // Specify the subtree orientation. + options.Orientation = Orientation.Horizontal; + return options; + } + + // Defines the node's default values. + private void NodeDefaults(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data is System.Text.Json.JsonElement) + { + node.Data = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString()); + } + dynamic hierarchicalData = node.Data as HierarchicalDetails; + node.Style = new ShapeStyle() { Fill = "#659be5", StrokeColor = "none", StrokeWidth = 2, }; + node.BackgroundColor = "#659be5"; + node.Width = 150; + node.Height = 50; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = hierarchicalData.Name, + Style =new TextStyle(){Color = "white"} + } + }; + } + + public class HierarchicalDetails : DynamicObject + { + Dictionary dictionary = new Dictionary(); + + public override bool TryGetMember(GetMemberBinder binder, out object result) + { + string name = binder.Name; + return dictionary.TryGetValue(name, out result); + } + public override bool TrySetMember(SetMemberBinder binder, object value) + { + dictionary[binder.Name] = value; + return true; + } + + public override System.Collections.Generic.IEnumerable GetDynamicMemberNames() + { + return this.dictionary?.Keys; + } + + } + protected override void OnInitialized() + { + this.DataSource = GetData(); + } + public List GetData() + { + ExpandoData.Clear(); + dynamic Member1 = new HierarchicalDetails(); + + Member1.Name = "Diagram"; + Member1.Category = ""; + Member1.FillColor = "#71AF17"; + ExpandoData.Add(Member1); + + dynamic Member2 = new HierarchicalDetails(); + + Member2.Name = "Layout"; + Member2.Category = "Diagram"; + Member2.FillColor = "#659be5"; + ExpandoData.Add(Member2); + + dynamic Member3 = new HierarchicalDetails(); + + Member3.Name = "Tree layout"; + Member3.Category = "Layout"; + Member3.FillColor = "#659be5"; + ExpandoData.Add(Member3); + + dynamic Member7 = new HierarchicalDetails(); + + Member7.Name = "Organizational chart"; + Member7.Category = "Layout"; + Member7.FillColor = "#659be5"; + ExpandoData.Add(Member7); + + dynamic Member8 = new HierarchicalDetails(); + + Member8.Name = "Hierarchical tree"; + Member8.Category = "Tree layout"; + Member8.FillColor = "#659be5"; + ExpandoData.Add(Member8); + + dynamic Member14 = new HierarchicalDetails(); + + Member14.Name = "Radial tree"; + Member14.Category = "Tree layout"; + Member14.FillColor = "#659be5"; + ExpandoData.Add(Member14); + + dynamic Member9 = new HierarchicalDetails(); + + Member9.Name = "Mind map"; + Member9.Category = "Hierarchical tree"; + Member9.FillColor = "#659be5"; + ExpandoData.Add(Member9); + + dynamic Member10 = new HierarchicalDetails(); + + Member10.Name = "Family tree"; + Member10.Category = "Hierarchical tree"; + Member10.FillColor = "#659be5"; + ExpandoData.Add(Member10); + + dynamic Member4 = new HierarchicalDetails(); + + Member4.Name = "Management"; + Member4.Category = "Organizational chart"; + Member4.FillColor = "#659be5"; + ExpandoData.Add(Member4); + + dynamic Member11 = new HierarchicalDetails(); + + Member11.Name = "Human resources"; + Member11.Category = "Management"; + Member11.FillColor = "#659be5"; + ExpandoData.Add(Member11); + + dynamic Member12 = new HierarchicalDetails(); + + Member12.Name = "University"; + Member12.Category = "Management"; + Member12.FillColor = "#659be5"; + ExpandoData.Add(Member12); + + return ExpandoData; + } +} diff --git a/Diagram/Server/Pages/DataBinding/ExpandoObject.razor b/Diagram/Server/Pages/DataBinding/ExpandoObject.razor new file mode 100644 index 0000000..9eb26c4 --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/ExpandoObject.razor @@ -0,0 +1,170 @@ +@page "/ExpandoObject" +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + // Specify the layout type. + LayoutType type = LayoutType.HierarchicalTree; + // Specify the orientation of the layout. + LayoutOrientation orientation = LayoutOrientation.TopToBottom; + HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + int HorizontalSpacing = 30; + int VerticalSpacing = 30; + public List DataSource { get; set; } + public List ExpandoData = new List(); + public class ExpandoObject + { + public string Name { get; set; } + public string Category { get; set; } + public string FillColor { get; set; } + } + // Defines the connector's default values. + private void ConnectorDefaults(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; + (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6d6d6d" }; + (connector as Connector).Constraints = 0; + (connector as Connector).CornerRadius = 5; + } + + // Create the layout info. + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) + { + // Enable the sub-tree. + options.EnableSubTree = true; + // Specify the subtree orientation. + options.Orientation = Orientation.Horizontal; + return options; + } + + // Defines the node's default values. + private void NodeDefaults(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data is System.Text.Json.JsonElement) + { + node.Data = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString()); + } + dynamic hierarchicalData = node.Data as ExpandoObject; + node.Style = new ShapeStyle() { Fill = "#659be5", StrokeColor = "none", StrokeWidth = 2, }; + node.BackgroundColor = "#659be5"; + node.Width = 150; + node.Height = 50; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = hierarchicalData.Name, + Style =new TextStyle(){Color = "white"} + } + }; + } + + protected override void OnInitialized() + { + this.DataSource = GetData(); + } + public List GetData() + { + ExpandoData.Clear(); + dynamic Member1 = new ExpandoObject(); + + Member1.Name = "Diagram"; + Member1.Category = ""; + Member1.FillColor = "#71AF17"; + ExpandoData.Add(Member1); + + dynamic Member2 = new ExpandoObject(); + + Member2.Name = "Layout"; + Member2.Category = "Diagram"; + Member2.FillColor = "#659be5"; + ExpandoData.Add(Member2); + + dynamic Member3 = new ExpandoObject(); + + Member3.Name = "Tree layout"; + Member3.Category = "Layout"; + Member3.FillColor = "#659be5"; + ExpandoData.Add(Member3); + + dynamic Member7 = new ExpandoObject(); + + Member7.Name = "Organizational chart"; + Member7.Category = "Layout"; + Member7.FillColor = "#659be5"; + ExpandoData.Add(Member7); + + dynamic Member8 = new ExpandoObject(); + + Member8.Name = "Hierarchical tree"; + Member8.Category = "Tree layout"; + Member8.FillColor = "#659be5"; + ExpandoData.Add(Member8); + + dynamic Member14 = new ExpandoObject(); + + Member14.Name = "Radial tree"; + Member14.Category = "Tree layout"; + Member14.FillColor = "#659be5"; + ExpandoData.Add(Member14); + + dynamic Member9 = new ExpandoObject(); + + Member9.Name = "Mind map"; + Member9.Category = "Hierarchical tree"; + Member9.FillColor = "#659be5"; + ExpandoData.Add(Member9); + + dynamic Member10 = new ExpandoObject(); + + Member10.Name = "Family tree"; + Member10.Category = "Hierarchical tree"; + Member10.FillColor = "#659be5"; + ExpandoData.Add(Member10); + + dynamic Member4 = new ExpandoObject(); + + Member4.Name = "Management"; + Member4.Category = "Organizational chart"; + Member4.FillColor = "#659be5"; + ExpandoData.Add(Member4); + + dynamic Member11 = new ExpandoObject(); + + Member11.Name = "Human resources"; + Member11.Category = "Management"; + Member11.FillColor = "#659be5"; + ExpandoData.Add(Member11); + + dynamic Member12 = new ExpandoObject(); + + Member12.Name = "University"; + Member12.Category = "Management"; + Member12.FillColor = "#659be5"; + ExpandoData.Add(Member12); + + return ExpandoData; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/DataBinding/JSONData.razor b/Diagram/Server/Pages/DataBinding/JSONData.razor new file mode 100644 index 0000000..f1ed40f --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/JSONData.razor @@ -0,0 +1,61 @@ +@page "/JsonData" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Data + + + + + + + + +@code +{ + SfDiagramComponent Diagram; + float x = 100; + float y = 100; + Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); + + // Create the hierarchical details with needed properties. + public class HierarchicalDetails + { + public string Name { get; set; } + public string FillColor { get; set; } + public string Category { get; set; } + } + + // Create the data source with node name and fill color values. + public HierarchicalDetails[] DataSource = new HierarchicalDetails[] + { + new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Organizational chart", Category="Diagram",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"}, + }; + + // Defines the node's default values. + private void NodeDefaults(IDiagramObject obj) + { + Node node = obj as Node; + node.OffsetX = x; + node.OffsetY = y; + x += 100; + HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails; + node.Style.Fill = hierarchicalData.FillColor; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = hierarchicalData.Name + } + }; + } + + private CommonElement SetTemplate(IDiagramObject node) + { + return null; + } +} diff --git a/Diagram/Server/Pages/DataBinding/LocalData.razor b/Diagram/Server/Pages/DataBinding/LocalData.razor new file mode 100644 index 0000000..b2a9333 --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/LocalData.razor @@ -0,0 +1,97 @@ +@page "/LocalData" +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + // Specify the layout type. + LayoutType type = LayoutType.HierarchicalTree; + // Specify the orientation of the layout. + LayoutOrientation orientation = LayoutOrientation.TopToBottom; + HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + int HorizontalSpacing = 30; + int VerticalSpacing = 30; + + // Defines the connector's default values. + private void ConnectorDefaults(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; + (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6d6d6d" }; + (connector as Connector).Constraints = 0; + (connector as Connector).CornerRadius = 5; + } + + // Create the layout info. + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) + { + // Enable the sub-tree. + options.EnableSubTree = true; + // Specify the subtree orientation. + options.Orientation = Orientation.Horizontal; + return options; + } + + // Defines the node's default values. + private void NodeDefaults(IDiagramObject obj) + { + Node node = obj as Node; + HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails; + node.Style = new ShapeStyle() { Fill = "#659be5", StrokeColor = "none", StrokeWidth = 2, }; + node.BackgroundColor = "#659be5"; + node.Width = 150; + node.Height = 50; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = hierarchicalData.Name, + Style =new TextStyle(){Color = "white"} + } + }; + } + + // Create the hierarchical details with needed properties. + public class HierarchicalDetails + { + public string Name { get; set; } + public string FillColor { get; set; } + public string Category { get; set; } + } + + // Create the data source with node name and fill color values. + public List DataSource = new List() + { + new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"} + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/DataBinding/ODataAdaptor.razor b/Diagram/Server/Pages/DataBinding/ODataAdaptor.razor new file mode 100644 index 0000000..130a9fc --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/ODataAdaptor.razor @@ -0,0 +1,88 @@ +@page "/ODataAdaptor" +@using Syncfusion.Blazor.Internal +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Data +@inject HttpClient Http + + +
+ + + + + + + +
+ +@code { + SfDiagramComponent Diagrams; + private float x = 100; + private float y = 100; + + public class Employee + { + public int? EmployeeID { get; set; } + public string FirstName { get; set; } + public int? ReportsTo { get; set; } + } + + private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); + + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.OffsetX = x; + node.OffsetY = y; + node.Width = 80; + node.Height = 40; + node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; + node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; + x += 100; + + Dictionary data = node.Data as Dictionary; + node.Annotations = new DiagramObjectCollection() { + new ShapeAnnotation() { + Content = data["FirstName"].ToString(), + Style = new TextStyle() { Color = "white" } + } + }; + + switch (data["FirstName"].ToString()) + { + case "Andrew": + node.Style.Fill = "#3A4857"; + break; + case "Nancy": + node.Style.Fill = "#2B8C68"; + break; + case "Janet": + node.Style.Fill = "#488CC1"; + break; + case "Margaret": + node.Style.Fill = "#4C888F"; + break; + case "Steven": + node.Style.Fill = "#8E4DB4"; + break; + case "Laura": + node.Style.Fill = "#CD6A32"; + break; + default: + node.Style.Fill = "#8E4DB4"; + break; + } + } + + private void OnConnectorCreating(IDiagramObject obj) + { + Connector connector = obj as Connector; + connector.Style.StrokeColor = "#048785"; + connector.Type = ConnectorSegmentType.Orthogonal; + connector.TargetDecorator.Shape = DecoratorShape.None; + connector.SourceDecorator.Shape = DecoratorShape.None; + connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; + } +} + + diff --git a/Diagram/Server/Pages/DataBinding/ODataV4Adaptor.razor b/Diagram/Server/Pages/DataBinding/ODataV4Adaptor.razor new file mode 100644 index 0000000..42bb326 --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/ODataV4Adaptor.razor @@ -0,0 +1,84 @@ +@page "/ODataV4Adaptor" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Data +@inject HttpClient Http + + +
+ + + + + + + +
+ +@code { + SfDiagramComponent Diagrams; + private float x = 100; + private float y = 100; + + public class Employee { + public int? EmployeeID { get; set; } + public string FirstName { get; set; } + public int? ReportsTo { get; set; } + } + + private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); + + private void OnNodeCreating(IDiagramObject obj) { + Node node = obj as Node; + node.OffsetX = x; + node.OffsetY = y; + node.Width = 80; + node.Height = 40; + node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; + node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; + x += 100; + + Dictionary data = node.Data as Dictionary; + node.Annotations = new DiagramObjectCollection() { + new ShapeAnnotation() { + Content = data["FirstName"].ToString(), + Style = new TextStyle() { Color = "white" } + } + }; + + switch (data["FirstName"].ToString()) { + case "Andrew": + node.Style.Fill = "#3A4857"; + break; + case "Nancy": + node.Style.Fill = "#2B8C68"; + break; + case "Janet": + node.Style.Fill = "#488CC1"; + break; + case "Margaret": + node.Style.Fill = "#4C888F"; + break; + case "Steven": + node.Style.Fill = "#8E4DB4"; + break; + case "Laura": + node.Style.Fill = "#CD6A32"; + break; + default: + node.Style.Fill = "#8E4DB4"; + break; + } + } + + private void OnConnectorCreating(IDiagramObject obj) { + Connector connector = obj as Connector; + connector.Style.StrokeColor = "#048785"; + connector.Type = ConnectorSegmentType.Orthogonal; + connector.TargetDecorator.Shape = DecoratorShape.None; + connector.SourceDecorator.Shape = DecoratorShape.None; + connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; + } + +} + + diff --git a/Diagram/Server/Pages/DataBinding/Parent-Child Relationship.razor b/Diagram/Server/Pages/DataBinding/Parent-Child Relationship.razor new file mode 100644 index 0000000..642ad73 --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/Parent-Child Relationship.razor @@ -0,0 +1,54 @@ +@page "/Parent-Child Relationship" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + + + + + +@code +{ + int left = 40; + int top = 50; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + int HorizontalSpacing = 40; + int VerticalSpacing = 40; + + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 40; + node.Width = 100; + //Initializing the default node's shape style. + node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }; + } + + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + } + + public class HierarchicalDetails + { + public string Id { get; set; } + public string Role { get; set; } + public string ParentId { get; set; } + public string ChartType { get; set; } + public string Color { get; set; } + } + public List DataSource = new List() + { + new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "1", Role= "General Manager", ParentId= "parent", ChartType= "right", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", ParentId= "1", Color= "#71AF17" }, + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/DataBinding/RemoteData.razor b/Diagram/Server/Pages/DataBinding/RemoteData.razor new file mode 100644 index 0000000..ba39c50 --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/RemoteData.razor @@ -0,0 +1,97 @@ +@page "/RemoteData" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Data + +
+
+ + + + + + + +
+
+ +@code +{ + SfDiagramComponent Diagram; + private float x = 100; + private float y = 100; + public class Employee + { + public int? EmployeeID { get; set; } + public string FirstName { get; set; } + public int? ReportsTo { get; set; } + } + private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.OffsetX = x; + node.OffsetY = y; + node.Width = 80; + node.Height = 40; + node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; + node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; + x += 100; + + Dictionary data = node.Data as Dictionary; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = data["FirstName"].ToString(), + Style = new TextStyle(){ Color = "white"} + } + }; + if (data["FirstName"].ToString() == "Andrew") + { + node.Style.Fill = "#3A4857"; + } + else if (data["FirstName"].ToString() == "Nancy") + { + node.Style.Fill = "#2B8C68"; + } + else if (data["FirstName"].ToString() == "Janet") + { + node.Style.Fill = "#488CC1"; + } + else if (data["FirstName"].ToString() == "Janet") + { + node.Style.Fill = "#488CC1"; + } + else if (data["FirstName"].ToString() == "Margaret") + { + node.Style.Fill = "#4C888F"; + } + else if (data["FirstName"].ToString() == "Steven") + { + node.Style.Fill = "#8E4DB4"; + } + else if (data["FirstName"].ToString() == "Laura") + { + node.Style.Fill = "#CD6A32"; + } + else + { + node.Style.Fill = "#8E4DB4"; + } + } + private void OnConnectorCreating(IDiagramObject obj) + { + Connector connector = obj as Connector; + connector.Style.StrokeColor = "#048785"; + connector.Type = ConnectorSegmentType.Orthogonal; + connector.TargetDecorator.Shape = DecoratorShape.None; + connector.SourceDecorator.Shape = DecoratorShape.None; + connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; + } + private CommonElement SetTemplate(IDiagramObject node) + { + return null; + } +} diff --git a/Diagram/Server/Pages/DataBinding/URLAdaptor.razor b/Diagram/Server/Pages/DataBinding/URLAdaptor.razor new file mode 100644 index 0000000..faad95f --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/URLAdaptor.razor @@ -0,0 +1,83 @@ +@page "/URLAdaptor" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Data +@inject HttpClient Http + + +
+ + + + + + + +
+ +@code { + SfDiagramComponent Diagrams; + private float x = 100; + private float y = 100; + + public class Employee { + public int? EmployeeID { get; set; } + public string FirstName { get; set; } + public int? ReportsTo { get; set; } + } + + private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); + + private void OnNodeCreating(IDiagramObject obj) { + Node node = obj as Node; + node.OffsetX = x; + node.OffsetY = y; + node.Width = 80; + node.Height = 40; + node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; + node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; + x += 100; + + Dictionary data = node.Data as Dictionary; + node.Annotations = new DiagramObjectCollection() { + new ShapeAnnotation() { + Content = data["FirstName"].ToString(), + Style = new TextStyle() { Color = "white" } + } + }; + + switch (data["FirstName"].ToString()) { + case "Andrew": + node.Style.Fill = "#3A4857"; + break; + case "Nancy": + node.Style.Fill = "#2B8C68"; + break; + case "Janet": + node.Style.Fill = "#488CC1"; + break; + case "Margaret": + node.Style.Fill = "#4C888F"; + break; + case "Steven": + node.Style.Fill = "#8E4DB4"; + break; + case "Laura": + node.Style.Fill = "#CD6A32"; + break; + default: + node.Style.Fill = "#8E4DB4"; + break; + } + } + + private void OnConnectorCreating(IDiagramObject obj) { + Connector connector = obj as Connector; + connector.Style.StrokeColor = "#048785"; + connector.Type = ConnectorSegmentType.Orthogonal; + connector.TargetDecorator.Shape = DecoratorShape.None; + connector.SourceDecorator.Shape = DecoratorShape.None; + connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; + } + +} + diff --git a/Diagram/Server/Pages/DataBinding/WebAPIAdaptor.razor b/Diagram/Server/Pages/DataBinding/WebAPIAdaptor.razor new file mode 100644 index 0000000..26f06f3 --- /dev/null +++ b/Diagram/Server/Pages/DataBinding/WebAPIAdaptor.razor @@ -0,0 +1,83 @@ +@page "/WebAPIAdaptor" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Data +@inject HttpClient Http + + +
+ + + + + + + +
+ +@code { + SfDiagramComponent Diagrams; + private float x = 100; + private float y = 100; + + public class Employee { + public int? EmployeeID { get; set; } + public string FirstName { get; set; } + public int? ReportsTo { get; set; } + } + + private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); + + private void OnNodeCreating(IDiagramObject obj) { + Node node = obj as Node; + node.OffsetX = x; + node.OffsetY = y; + node.Width = 80; + node.Height = 40; + node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; + node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; + x += 100; + + Dictionary data = node.Data as Dictionary; + node.Annotations = new DiagramObjectCollection() { + new ShapeAnnotation() { + Content = data["FirstName"].ToString(), + Style = new TextStyle() { Color = "white" } + } + }; + + switch (data["FirstName"].ToString()) { + case "Andrew": + node.Style.Fill = "#3A4857"; + break; + case "Nancy": + node.Style.Fill = "#2B8C68"; + break; + case "Janet": + node.Style.Fill = "#488CC1"; + break; + case "Margaret": + node.Style.Fill = "#4C888F"; + break; + case "Steven": + node.Style.Fill = "#8E4DB4"; + break; + case "Laura": + node.Style.Fill = "#CD6A32"; + break; + default: + node.Style.Fill = "#8E4DB4"; + break; + } + } + + private void OnConnectorCreating(IDiagramObject obj) { + Connector connector = obj as Connector; + connector.Style.StrokeColor = "#048785"; + connector.Type = ConnectorSegmentType.Orthogonal; + connector.TargetDecorator.Shape = DecoratorShape.None; + connector.SourceDecorator.Shape = DecoratorShape.None; + connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; + } + +} + diff --git a/Diagram/Server/Pages/DrawingTools/ConnectorDrawTool.razor b/Diagram/Server/Pages/DrawingTools/ConnectorDrawTool.razor new file mode 100644 index 0000000..d578ea4 --- /dev/null +++ b/Diagram/Server/Pages/DrawingTools/ConnectorDrawTool.razor @@ -0,0 +1,63 @@ +@page "/ConnectorDrawTool" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + //Reference to diagram + SfDiagramComponent diagram; + + //Defines diagram's nodes collection + public DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "group", + OffsetX = 200, + OffsetY = 200, + Width = 100, + Height = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Node", + Style = new TextStyle() + { + Color = "white", + } + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + nodes.Add(node); + } + + private void AddConnector() + { + //To draw an object once, activate draw once + diagram.InteractionController = DiagramInteractions.DrawOnce; + //Initialize the drawing object to draw the connectors + diagram.DrawingObject = new Connector() + { + ID = "connector1", + Type = ConnectorSegmentType.Straight, + Segments = new DiagramObjectCollection() + { + new ConnectorSegment() + { + Type = ConnectorSegmentType.Polyline, + } + }, + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/DrawingTools/FreehandDrawTool.razor b/Diagram/Server/Pages/DrawingTools/FreehandDrawTool.razor new file mode 100644 index 0000000..8a81083 --- /dev/null +++ b/Diagram/Server/Pages/DrawingTools/FreehandDrawTool.razor @@ -0,0 +1,54 @@ +@page "/FreehandDrawTool" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + +@code +{ + //Reference to the diagram. + SfDiagramComponent diagram; + //Define the diagram's nodes collection. + public DiagramObjectCollection nodes; + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "group", + OffsetX = 200, + OffsetY = 200, + Width = 100, + Height = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Node", + Style = new TextStyle() + { + Color = "white", + } + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + nodes.Add(node); + } + private void Freehand() + { + //Draw an object once and activate the draw once. + diagram.InteractionController = DiagramInteractions.DrawOnce; + //Initialize the drawing object to draw the freehand connector. + diagram.DrawingObject = new Connector() + { + ID = "connector1", + Type = ConnectorSegmentType.Freehand, + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/DrawingTools/MultipleTools.razor b/Diagram/Server/Pages/DrawingTools/MultipleTools.razor new file mode 100644 index 0000000..330b65b --- /dev/null +++ b/Diagram/Server/Pages/DrawingTools/MultipleTools.razor @@ -0,0 +1,15 @@ +@page "/MultipleTools" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Reference to diagram. + SfDiagramComponent diagram; + //Enable the multiple tools. + public DiagramInteractions tool = DiagramInteractions.DrawOnce | DiagramInteractions.ZoomPan; + //Defines diagram's connectors collection. + public DiagramObjectCollection connectors = new DiagramObjectCollection(); +} \ No newline at end of file diff --git a/Diagram/Server/Pages/DrawingTools/NodeDrawTool.razor b/Diagram/Server/Pages/DrawingTools/NodeDrawTool.razor new file mode 100644 index 0000000..9a8f51e --- /dev/null +++ b/Diagram/Server/Pages/DrawingTools/NodeDrawTool.razor @@ -0,0 +1,55 @@ +@page "/NodeDrawTool" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Reference to diagram + SfDiagramComponent diagram; + + //Defines diagram's nodes collection + public DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "group", + OffsetX = 200, + OffsetY = 200, + Width = 100, + Height = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Node", + Style = new TextStyle() + { + Color = "white", + } + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + nodes.Add(node); + } + + private void AddNode() + { + //To draw an object once, activate draw once + diagram.InteractionController = DiagramInteractions.DrawOnce; + //Initialize the drawing object to draw the shape + diagram.DrawingObject = new Node() + { + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/DrawingTools/PolygonShapeTool.razor b/Diagram/Server/Pages/DrawingTools/PolygonShapeTool.razor new file mode 100644 index 0000000..511700b --- /dev/null +++ b/Diagram/Server/Pages/DrawingTools/PolygonShapeTool.razor @@ -0,0 +1,60 @@ +@page "/PolygonShapeTool" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + +@code +{ + //Reference to diagram + SfDiagramComponent diagram; + //Defines diagram's nodes collection + public DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "group", + OffsetX = 200, + OffsetY = 200, + Width = 100, + Height = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Node", + Style = new TextStyle() + { + Color = "white", + } + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + nodes.Add(node); + } + + private void Polygon() + { + //To draw an object once, activate draw once + diagram.InteractionController = DiagramInteractions.DrawOnce; + //Initialize the drawing object to draw the polygon shape + diagram.DrawingObject = new Node() + { + ID = "polygon", + Shape = new BasicShape() + { + Type = NodeShapes.Basic, + Shape = NodeBasicShapes.Polygon, + }, + }; + } +} diff --git a/Diagram/Server/Pages/DrawingTools/PolylineDrawTool.razor b/Diagram/Server/Pages/DrawingTools/PolylineDrawTool.razor new file mode 100644 index 0000000..80b03e7 --- /dev/null +++ b/Diagram/Server/Pages/DrawingTools/PolylineDrawTool.razor @@ -0,0 +1,55 @@ +@page "/PolylineDrawTool" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + +@code +{ + //Reference to diagram + SfDiagramComponent diagram; + //Defines diagram's nodes collection + public DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "group", + OffsetX = 200, + OffsetY = 200, + Width = 100, + Height = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Node", + Style = new TextStyle() + { + Color = "white", + } + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + nodes.Add(node); + } + private void Polyline() + { + //Draw an object once and activate the draw once. + diagram.InteractionController = DiagramInteractions.DrawOnce; + //Initialize the drawing object to draw the polyline connector. + diagram.DrawingObject = new Connector() + { + ID = "connector1", + Type = ConnectorSegmentType.Polyline, + }; + } +} diff --git a/Diagram/Server/Pages/DrawingTools/TextNodeDrawTool.razor b/Diagram/Server/Pages/DrawingTools/TextNodeDrawTool.razor new file mode 100644 index 0000000..40543db --- /dev/null +++ b/Diagram/Server/Pages/DrawingTools/TextNodeDrawTool.razor @@ -0,0 +1,55 @@ +@page "/TextNodeDrawTool" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Reference to diagram. + SfDiagramComponent diagram; + + //Define the diagram's nodes collection. + public DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "group", + OffsetX = 200, + OffsetY = 200, + Width = 100, + Height = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Node", + Style = new TextStyle() + { + Color = "white", + } + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + nodes.Add(node); + } + + private void AddNode() + { + //To draw an object once, activate draw once. + diagram.InteractionController = DiagramInteractions.DrawOnce; + //Initialize the drawing object to draw the shape. + diagram.DrawingObject = new Node() + { + Shape = new TextShape() { Content = "Text Content" }, + Style = new TextStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } + }; + } +} diff --git a/Diagram/Server/Pages/DrawingTools/ToolSelection.razor b/Diagram/Server/Pages/DrawingTools/ToolSelection.razor new file mode 100644 index 0000000..8e218fa --- /dev/null +++ b/Diagram/Server/Pages/DrawingTools/ToolSelection.razor @@ -0,0 +1,13 @@ +@page "/" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Enable the single tool. + public DiagramInteractions tool = DiagramInteractions.DrawOnce; + //Defines diagram's connectors collection. + public DiagramObjectCollection connectors = new DiagramObjectCollection(); +} diff --git a/Diagram/Server/Pages/Events/ClickEvent.razor b/Diagram/Server/Pages/Events/ClickEvent.razor new file mode 100644 index 0000000..86222df --- /dev/null +++ b/Diagram/Server/Pages/Events/ClickEvent.razor @@ -0,0 +1,32 @@ +@page "/ClickEvent" +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100 + }; + nodes.Add(node); + } + private void OnClick(ClickEventArgs args) + { + + } +} diff --git a/Diagram/Server/Pages/Events/CreatedEvent.razor b/Diagram/Server/Pages/Events/CreatedEvent.razor new file mode 100644 index 0000000..11aa48a --- /dev/null +++ b/Diagram/Server/Pages/Events/CreatedEvent.razor @@ -0,0 +1,34 @@ +@page "/CreatedEvent" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100 + }; + nodes.Add(node); + } + private void OnCreated(object args) + { + + Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Events/DragDrop.razor b/Diagram/Server/Pages/Events/DragDrop.razor new file mode 100644 index 0000000..6423560 --- /dev/null +++ b/Diagram/Server/Pages/Events/DragDrop.razor @@ -0,0 +1,55 @@ +@page "/DragDrop" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using System.Collections.ObjectModel + + + + + +@code{ + SfDiagramComponent Diagram; + SfSymbolPaletteComponent PaletteInstance; + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + DiagramObjectCollection TNodes = new DiagramObjectCollection(); + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramSize SymbolPreview; + protected override async Task OnAfterRenderAsync(bool firstRender) + { + PaletteInstance.Targets = new DiagramObjectCollection() { }; + PaletteInstance.Targets.Add(Diagram); + } + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + SymbolInfo SymbolInfo = new SymbolInfo(); + SymbolInfo.Fit = true; + return SymbolInfo; + } + protected override void OnInitialized() + { + SymbolPreview = new DiagramSize(); + SymbolPreview.Width = 80; + SymbolPreview.Height = 80; + TNodes = new DiagramObjectCollection(); + Node TNode2 = new Node() + { + ID = "node1", + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } + }; + TNodes.Add(TNode2); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, + }; + } + // Notify the drop event. + private void DragDrop(DropEventArgs args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Events/DragLeaveEvent.razor b/Diagram/Server/Pages/Events/DragLeaveEvent.razor new file mode 100644 index 0000000..dacaa8a --- /dev/null +++ b/Diagram/Server/Pages/Events/DragLeaveEvent.razor @@ -0,0 +1,206 @@ +@page "/DragLeaveEvent" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using System.Collections.ObjectModel + +
+ + +
+
+ + + +
+
+
+ + +
+
+ @*Hidden:Lines*@ +
+
+ + +@code{ + SfDiagramComponent Diagram; + DiagramSize SymbolPreview; + DiagramSize diagramPreview; + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + DiagramObjectCollection TNodes = new DiagramObjectCollection(); + DiagramObjectCollection nodes = new DiagramObjectCollection(); + SfSymbolPaletteComponent PaletteInstance; + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + SymbolInfo SymbolInfo = new SymbolInfo(); + SymbolInfo.Fit = true; + return SymbolInfo; + } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + PaletteInstance.Targets = new DiagramObjectCollection() { }; + PaletteInstance.Targets.Add(Diagram); + } + protected override void OnInitialized() + { + SymbolPreview = new DiagramSize(); + SymbolPreview.Width = 80; + SymbolPreview.Height = 80; + diagramPreview = new DiagramSize() + { + Width = 50, + Height = 50 + }; + TNodes = new DiagramObjectCollection(); + Node TNode2 = new Node() + { + ID = "node1", + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } + }; + TNodes.Add(TNode2); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, + }; + } + // Notify the DragLeave event. + private void OnDragLeave(DragLeaveEventArgs args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Events/DragStartEvent.razor b/Diagram/Server/Pages/Events/DragStartEvent.razor new file mode 100644 index 0000000..10e8052 --- /dev/null +++ b/Diagram/Server/Pages/Events/DragStartEvent.razor @@ -0,0 +1,51 @@ +@page "/DragStartEvent" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Diagram.SymbolPalette + + + + + +@code{ + SfDiagramComponent Diagram; + SfSymbolPaletteComponent PaletteInstance; + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + DiagramObjectCollection TNodes = new DiagramObjectCollection(); + DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + SymbolInfo SymbolInfo = new SymbolInfo(); + SymbolInfo.Fit = true; + return SymbolInfo; + } + protected override void OnInitialized() + { + TNodes = new DiagramObjectCollection(); + Node TNode2 = new Node() + { + ID = "node1", + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } + }; + TNodes.Add(TNode2); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, + }; + } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + PaletteInstance.Targets = new DiagramObjectCollection() { }; + PaletteInstance.Targets.Add(Diagram); + } + //Notify the drag start event. + private void DragStart(DragStartEventArgs args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Events/DraggingEvent.razor b/Diagram/Server/Pages/Events/DraggingEvent.razor new file mode 100644 index 0000000..9fffd86 --- /dev/null +++ b/Diagram/Server/Pages/Events/DraggingEvent.razor @@ -0,0 +1,55 @@ +@page "/DraggingEvent" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using System.Collections.ObjectModel + + + + + +@code{ + SfDiagramComponent Diagram; + SfSymbolPaletteComponent PaletteInstance; + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + DiagramObjectCollection TNodes = new DiagramObjectCollection(); + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramSize SymbolPreview; + protected override async Task OnAfterRenderAsync(bool firstRender) + { + PaletteInstance.Targets = new DiagramObjectCollection() { }; + PaletteInstance.Targets.Add(Diagram); + } + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + SymbolInfo SymbolInfo = new SymbolInfo(); + SymbolInfo.Fit = true; + return SymbolInfo; + } + protected override void OnInitialized() + { + SymbolPreview = new DiagramSize(); + SymbolPreview.Width = 80; + SymbolPreview.Height = 80; + TNodes = new DiagramObjectCollection(); + Node TNode2 = new Node() + { + ID = "node1", + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } + }; + TNodes.Add(TNode2); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, + }; + } + // Notify the dragging event. + private void Dragging(DraggingEventArgs args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Events/KeyDownEvent.razor b/Diagram/Server/Pages/Events/KeyDownEvent.razor new file mode 100644 index 0000000..176ae80 --- /dev/null +++ b/Diagram/Server/Pages/Events/KeyDownEvent.razor @@ -0,0 +1,33 @@ +@page "/KeyDownEvent" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + + +@code{ + SfDiagramComponent Diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100 + }; + nodes.Add(node); + } + // Notify the keydown event + private void OnKeyDown(KeyEventArgs args) + { + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Events/KeyUpEvent.razor b/Diagram/Server/Pages/Events/KeyUpEvent.razor new file mode 100644 index 0000000..4b03198 --- /dev/null +++ b/Diagram/Server/Pages/Events/KeyUpEvent.razor @@ -0,0 +1,33 @@ +@page "/KeyUpEvent" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100 + }; + nodes.Add(node); + } + private void OnKeyUp(KeyEventArgs args) + { + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Events/OnAutoScrollChange.razor b/Diagram/Server/Pages/Events/OnAutoScrollChange.razor new file mode 100644 index 0000000..f7cf269 --- /dev/null +++ b/Diagram/Server/Pages/Events/OnAutoScrollChange.razor @@ -0,0 +1,58 @@ +@page "/OnAutoScrollChange" + +@using Syncfusion.Blazor.Diagram + + @* Sets the ScrollSettings for the diagram *@ + + + +@code +{ + ScrollLimitMode ScrollLimit { get; set; } = ScrollLimitMode.Infinity; + DiagramObjectCollection nodes; + //Defines diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + DiagramMargin autoScrollBorder = new DiagramMargin() { Left = 30, Right = 30, Top = 30, Bottom = 30 }; + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + // Add node. + nodes.Add(node); + Connector Connector = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector. + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 100, Y = 200 }, + // Type of the connector segments. + Type = ConnectorSegmentType.Straight, + Style = new ShapeStyle() + { + StrokeColor = "#6495ED", + StrokeWidth = 1 + }, + }; + connectors.Add(Connector); + } + private void AutoScrollChange(AutoScrollChangeEventArgs args) + { + args.Cancel = false; + args.Delay = new TimeSpan(0, 0, 0, 1, 0); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Export/Export.razor b/Diagram/Server/Pages/Export/Export.razor new file mode 100644 index 0000000..055fab4 --- /dev/null +++ b/Diagram/Server/Pages/Export/Export.razor @@ -0,0 +1,26 @@ +@page "/Export" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code { + SfDiagramComponent diagram; + + //To export the diagram as base64 string. + private async Task ExportBase64() + { + DiagramExportSettings export = new DiagramExportSettings(); + string[] base64 = await diagram.ExportAsync(DiagramExportFormat.PNG, export); + } + + //To export the diagram as png. + private async Task ExportPng() + { + DiagramExportSettings export = new DiagramExportSettings(); + await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Export/ExportClipBounds.razor b/Diagram/Server/Pages/Export/ExportClipBounds.razor new file mode 100644 index 0000000..e4f1f38 --- /dev/null +++ b/Diagram/Server/Pages/Export/ExportClipBounds.razor @@ -0,0 +1,24 @@ +@page "/ExportClipBounds" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code { + SfDiagramComponent diagram; + + private async Task Export() + { + DiagramExportSettings export = new DiagramExportSettings(); + export.Region = DiagramPrintExportRegion.PageSettings; + export.PageWidth = 816; + export.PageHeight = 1054; + export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 }; + export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 }; + //To export the diagram + await diagram.ExportAsync("diagram",DiagramExportFormat.PNG, export); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Export/ExportMargin.razor b/Diagram/Server/Pages/Export/ExportMargin.razor new file mode 100644 index 0000000..ba4dbd6 --- /dev/null +++ b/Diagram/Server/Pages/Export/ExportMargin.razor @@ -0,0 +1,24 @@ +@page "/ExportMargin" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + + private async Task Export() + { + DiagramExportSettings export = new DiagramExportSettings(); + export.Region = DiagramPrintExportRegion.PageSettings; + export.PageWidth = 816; + export.PageHeight = 1054; + export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 }; + //To export the diagram + await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Export/ExportOption.razor b/Diagram/Server/Pages/Export/ExportOption.razor new file mode 100644 index 0000000..c7477af --- /dev/null +++ b/Diagram/Server/Pages/Export/ExportOption.razor @@ -0,0 +1,19 @@ +@page "/ExportOption" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + + private async Task Export() + { + DiagramExportSettings export = new DiagramExportSettings(); + //To export the diagram + await diagram.ExportAsync("Diagram", DiagramExportFormat.SVG, export); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Export/ExportOrientation.razor b/Diagram/Server/Pages/Export/ExportOrientation.razor new file mode 100644 index 0000000..d08563d --- /dev/null +++ b/Diagram/Server/Pages/Export/ExportOrientation.razor @@ -0,0 +1,27 @@ +@page "/ExportOrientation" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + + private async Task Export() + { + DiagramExportSettings export = new DiagramExportSettings(); + export.Region = DiagramPrintExportRegion.PageSettings; + export.PageWidth = 816; + export.PageHeight = 1054; + //To export the diagram in single page. + export.FitToPage = true; + export.Orientation = PageOrientation.Landscape; + export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 }; + export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 }; + //To export the diagram + await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Export/ExportRegion.razor b/Diagram/Server/Pages/Export/ExportRegion.razor new file mode 100644 index 0000000..1a4bf65 --- /dev/null +++ b/Diagram/Server/Pages/Export/ExportRegion.razor @@ -0,0 +1,24 @@ +@page "/ExportRegion" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + + private async Task Export() + { + DiagramExportSettings export = new DiagramExportSettings(); + export.Region = DiagramPrintExportRegion.PageSettings; + export.PageWidth = 816; + export.PageHeight = 1054; + export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 }; + //To export the diagram + await diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, export); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Export/ExportToPDF.razor b/Diagram/Server/Pages/Export/ExportToPDF.razor new file mode 100644 index 0000000..c2880e6 --- /dev/null +++ b/Diagram/Server/Pages/Export/ExportToPDF.razor @@ -0,0 +1,73 @@ +@page "/ExportToPDF" +@using Syncfusion.PdfExport; + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons +@inject IJSRuntime JS; + + + + + +@code{ + //Reference the diagram + SfDiagramComponent diagram; + + private async void ExportPDF() + { + DiagramExportSettings print = new DiagramExportSettings(); + print.Region = DiagramPrintExportRegion.PageSettings; + print.PageWidth = 500; + print.PageHeight = 800; + print.Orientation = PageOrientation.Portrait; + print.FitToPage = true; + print.Margin = new DiagramThickness() { Left = 30, Top = 20, Right = 10, Bottom = 10 }; + print.ClipBounds = new DiagramRect() { X = 200, Y = 200, Width = 200, Height = 200 }; + //To export the diagram into base64 + var images = await diagram.ExportAsync(DiagramExportFormat.PNG, print); + var pdforientation = PageOrientation.Portrait == PageOrientation.Landscape ? PdfPageOrientation.Landscape : PdfPageOrientation.Portrait; + await ExportToPdf("diagram", pdforientation, true, images); + } + // + private async Task ExportToPdf(string fileName, PdfPageOrientation orientation, bool allowDownload, string[] images) + { + PdfDocument document = new PdfDocument(); + document.PageSettings.Orientation = orientation; + document.PageSettings.Margins = new PdfMargins() { Left = 0, Right = 0, Top = 0, Bottom = 0 }; + string base64String; + var dict = images; + for (int i = 0; i < dict.Count(); i++) + { + base64String = dict[i]; + using (MemoryStream initialStream = new MemoryStream(Convert.FromBase64String(base64String.Split("base64,")[1]))) + { + Stream stream = initialStream as Stream; + PdfPage page = document.Pages.Add(); + PdfGraphics graphics = page.Graphics; + #pragma warning disable CA2000 + PdfBitmap image = new PdfBitmap(stream); + #pragma warning restore CA2000 + graphics.DrawImage(image, 0, 0); + } + } + using (MemoryStream memoryStream = new MemoryStream()) + { + document.Save(memoryStream); + memoryStream.Position = 0; + base64String = Convert.ToBase64String(memoryStream.ToArray()); + if (allowDownload) + { + await JSRuntimeExtensions.InvokeAsync(JS, "downloadPdf", new object[] { base64String, fileName }); + base64String = string.Empty; + } + else + { + base64String = "data:application/pdf;base64," + base64String; + } + document.Dispose(); + } + return base64String; + } + + } + \ No newline at end of file diff --git a/Diagram/Server/Pages/Export/ExportWithPage.razor b/Diagram/Server/Pages/Export/ExportWithPage.razor new file mode 100644 index 0000000..4b9cc6d --- /dev/null +++ b/Diagram/Server/Pages/Export/ExportWithPage.razor @@ -0,0 +1,27 @@ +@page "/ExportWithPage" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code { + //Reference the diagram. + SfDiagramComponent diagram; + + private async Task Export() + { + DiagramExportSettings export = new DiagramExportSettings(); + export.Region = DiagramPrintExportRegion.PageSettings; + export.PageWidth = 816; + export.PageHeight = 1054; + //To export the diagram in single page. + export.FitToPage = true; + export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 }; + export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 }; + //To export the diagram + await diagram.ExportAsync("Diagram", DiagramExportFormat.PNG, export); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Export/ExportWithPageSize.razor b/Diagram/Server/Pages/Export/ExportWithPageSize.razor new file mode 100644 index 0000000..c4abe8a --- /dev/null +++ b/Diagram/Server/Pages/Export/ExportWithPageSize.razor @@ -0,0 +1,21 @@ +@page "/ExportWithPageSize" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + + private async Task Export() + { + DiagramExportSettings export = new DiagramExportSettings(); + export.PageWidth = 816; + export.PageHeight = 1054; + //To export the diagram + await diagram.ExportAsync(DiagramExportFormat.SVG, export); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Flip/FlipDirection.razor b/Diagram/Server/Pages/Flip/FlipDirection.razor new file mode 100644 index 0000000..fb84928 --- /dev/null +++ b/Diagram/Server/Pages/Flip/FlipDirection.razor @@ -0,0 +1,187 @@ +@page "/FlipDirection" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.DropDowns + + + + + + + + + + + +@code +{ + //Initialize the diagram connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Reference the diagram + public SfDiagramComponent diagram; + //Define diagram nodes collection + DiagramObjectCollection NodeCollection; + public class FlipOption + { + public string Name { get; set; } + public string Value { get; set; } // Bound value + } + + List FlipDirections = new() + { + new FlipOption { Name = "None", Value = "None" }, + new FlipOption { Name = "Horizontal", Value = "Horizontal" }, + new FlipOption { Name = "Vertical", Value = "Vertical" }, + new FlipOption { Name = "Both", Value = "Both" } + }; + + List FlipModes = new() + { + new FlipOption { Name = "None", Value = "None" }, + new FlipOption { Name = "Content", Value = "Content" }, + new FlipOption { Name = "Port", Value = "Port" }, + new FlipOption { Name = "Text", Value = "Text" }, + new FlipOption { Name = "PortAndLabelOnly", Value = "LabelOnly" }, + new FlipOption { Name = "PortWithLabelText", Value = "PortWithLabelText" }, + new FlipOption { Name = "LabelOnly", Value = "LabelOnly" }, + new FlipOption { Name = "All", Value = "All" } + }; + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 700, + OffsetY = 100, + Flip = FlipDirection.Horizontal, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + ID="node1annotation", + Content = "Offset(0,0)", + Offset = new DiagramPoint() { X = 0, Y = 0 } + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + }, + Shape = new FlowShape() + { + Type = NodeShapes.Flow, + Shape = NodeFlowShapes.Card + }, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="ports", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0 }, + Visibility = PortVisibility.Visible, + } + } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 900, + OffsetY = 100, + Flip = FlipDirection.Horizontal, + FlipMode = DiagramFlipMode.Port, + Style = new ShapeStyle() + { + Fill = "#6495ED", + }, + Shape = new FlowShape() + { + Type = NodeShapes.Flow, + Shape = NodeFlowShapes.Card + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Offset(0,0)", + Offset = new DiagramPoint() { X = 0, Y = 0.5 } + } + }, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0 }, + Visibility = PortVisibility.Visible + } + } + }; + NodeCollection = new DiagramObjectCollection() { node1, node2 }; + } + + public void HorizontalPort() + { + if (diagram.SelectionSettings.Nodes.Count > 0) + { + for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) + { + diagram.SelectionSettings.Nodes[i].FlipMode = DiagramFlipMode.Port; + if (diagram.SelectionSettings.Nodes[i].Flip.HasFlag(FlipDirection.Horizontal)) + { + diagram.SelectionSettings.Nodes[i].Flip &= ~FlipDirection.Horizontal; + } + else + { + diagram.SelectionSettings.Nodes[i].Flip |= FlipDirection.Horizontal; + } + } + } + } + // This method applys flipDirection to the selected node's + public void FlipDirectionChange(ChangeEventArgs args) + { + diagram.StartGroupAction(); + + if (diagram.SelectionSettings.Nodes.Count > 0) + { + for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) + { + diagram.SelectionSettings.Nodes[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); + } + } + for (int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) + { + diagram.SelectionSettings.Connectors[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); + } + diagram.EndGroupAction(); + + } + + //This method apply's diagramFLipMode to the selected node's + public void FlipModeChange(ChangeEventArgs args) + { + diagram.StartGroupAction(); + + if (diagram.SelectionSettings.Nodes.Count > 0) + { + for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) + { + diagram.SelectionSettings.Nodes[i].FlipMode = (DiagramFlipMode)Enum.Parse(typeof(DiagramFlipMode), args.Value.ToString()); + } + } + + diagram.EndGroupAction(); + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Flip/FlipGroup.razor b/Diagram/Server/Pages/Flip/FlipGroup.razor new file mode 100644 index 0000000..4f1358e --- /dev/null +++ b/Diagram/Server/Pages/Flip/FlipGroup.razor @@ -0,0 +1,193 @@ +@page "/FlipGroup" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.DropDowns + + + + + + + + + + + + +@code +{ + //Initialize the diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Reference the diagram + public SfDiagramComponent diagram; + //Define diagram's nodes collection + DiagramObjectCollection NodeCollection; + public class FlipOption + { + public string Name { get; set; } + public string Value { get; set; } // Bound value + } + + List FlipDirections = new() + { + new FlipOption { Name = "None", Value = "None" }, + new FlipOption { Name = "Horizontal", Value = "Horizontal" }, + new FlipOption { Name = "Vertical", Value = "Vertical" }, + new FlipOption { Name = "Both", Value = "Both" } + }; + + List FlipModes = new() + { + new FlipOption { Name = "None", Value = "None" }, + new FlipOption { Name = "Content", Value = "Content" }, + new FlipOption { Name = "Port", Value = "Port" }, + new FlipOption { Name = "Text", Value = "Text" }, + new FlipOption { Name = "PortAndLabelOnly", Value = "LabelOnly" }, + new FlipOption { Name = "PortWithLabelText", Value = "PortWithLabelText" }, + new FlipOption { Name = "LabelOnly", Value = "LabelOnly" }, + new FlipOption { Name = "All", Value = "All" } + }; + protected override void OnInitialized() + { + Node node3 = new Node() + { + ID = "node3", + Width = 100, + Height = 60, + OffsetX = 500, + OffsetY = 300, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + ID="ano3", + Content = "node1", + Offset = new DiagramPoint() { X = 0.5, Y = 0.5 } + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + }, + Shape = new FlowShape() + { + Type = NodeShapes.Flow, + Shape = NodeFlowShapes.Card + }, + Ports = new DiagramObjectCollection() + { + new PointPort() + { ID="port3", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0 }, + Width=14,Height=14, + Visibility = PortVisibility.Visible + } + }, + }; + Node node4 = new Node() + { + ID = "node4", + Width = 100, + Height = 60, + OffsetX = 700, + OffsetY = 400, + Style = new ShapeStyle() + { + Fill = "#6495ED", + }, + Shape = new FlowShape() + { + Type = NodeShapes.Flow, + Shape = NodeFlowShapes.Card + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + ID="anno4", + Content = "node2", + Offset = new DiagramPoint() { X = 0.5, Y = 0.5 } + } + }, + Ports = new DiagramObjectCollection() + { + new PointPort() + { ID="port4", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0 }, + Width=14,Height=14, + Visibility = PortVisibility.Visible + } + }, + }; + NodeCollection = new DiagramObjectCollection() { node3, node4 }; + NodeGroup groupNode = new NodeGroup() + { + ID = "group", + Children = new string[] { "node3", "node4" }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + ID="anno4", + Content = "GroupNode", + Offset = new DiagramPoint() { X = 0.5, Y = 0.5 } + } + }, + Ports = new DiagramObjectCollection() + { + new PointPort() + { ID="port4", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0}, + Width=14,Height=14, + Visibility = PortVisibility.Visible + } + }, + }; + NodeCollection.Add(groupNode); + } + // This method applys flipDirection to the selected node's + public void FlipDirectionChange(ChangeEventArgs args) + { + diagram.StartGroupAction(); + + if (diagram.SelectionSettings.Nodes.Count > 0) + { + for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) + { + diagram.SelectionSettings.Nodes[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); + } + } + for (int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) + { + diagram.SelectionSettings.Connectors[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); + } + diagram.EndGroupAction(); + + } + + //This method apply's diagramFLipMode to the selected node's + public void FlipModeChange(ChangeEventArgs args) + { + diagram.StartGroupAction(); + + if (diagram.SelectionSettings.Nodes.Count > 0) + { + for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) + { + diagram.SelectionSettings.Nodes[i].FlipMode = (DiagramFlipMode)Enum.Parse(typeof(DiagramFlipMode), args.Value.ToString()); + } + } + + diagram.EndGroupAction(); + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/GettingStarted/GettingStarted.razor b/Diagram/Server/Pages/GettingStarted/GettingStarted.razor new file mode 100644 index 0000000..7f1cb4e --- /dev/null +++ b/Diagram/Server/Pages/GettingStarted/GettingStarted.razor @@ -0,0 +1,125 @@ +@page "/GettingStarted" + + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + SfDiagramComponent diagram; + int connectorCount = 0; + //Defines Diagram's nodes collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Defines Diagram's connectors collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitDiagramModel(); + } + + private void InitDiagramModel() + { + CreateNode("Start", 300, 50, NodeFlowShapes.Terminator, "Start"); + CreateNode("Init", 300, 140, NodeFlowShapes.Process, "var i = 0"); + CreateNode("Condition", 300, 230, NodeFlowShapes.Decision, "i < 10?"); + CreateNode("Print", 300, 320, NodeFlowShapes.PreDefinedProcess, "print(\'Hello!!\');"); + CreateNode("Increment", 300, 410, NodeFlowShapes.Process, "i++;"); + CreateNode("End", 300, 500, NodeFlowShapes.Terminator, "End"); + // Creates orthogonal connector. + OrthogonalSegment segment1 = new OrthogonalSegment() + { + Type = ConnectorSegmentType.Orthogonal, + Direction = Direction.Right, + Length = 30, + }; + OrthogonalSegment segment2 = new OrthogonalSegment() + { + Type = ConnectorSegmentType.Orthogonal, + Length = 300, + Direction = Direction.Bottom, + }; + OrthogonalSegment segment3 = new OrthogonalSegment() + { + Type = ConnectorSegmentType.Orthogonal, + Length = 30, + Direction = Direction.Left, + }; + OrthogonalSegment segment4 = new OrthogonalSegment() + { + Type = ConnectorSegmentType.Orthogonal, + Length = 200, + Direction = Direction.Top, + }; + CreateConnector("Start", "Init"); + CreateConnector("Init", "Condition"); + CreateConnector("Condition", "Print"); + CreateConnector("Condition", "End", "Yes", segment1, segment2); + CreateConnector("Print", "Increment", "No"); + CreateConnector("Increment", "Condition", null, segment3, segment4); + } + + // Method to create connector. + private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null) + { + Connector diagramConnector = new Connector() + { + // Represents the unique id of the connector. + ID = string.Format("connector{0}", ++connectorCount), + SourceID = sourceId, + TargetID = targetId, + }; + if (label != default(string)) + { + // Represents the annotation of the connector. + PathAnnotation annotation = new PathAnnotation() + { + Content = label, + Style = new TextStyle() { Fill = "white" } + }; + diagramConnector.Annotations = new DiagramObjectCollection() { annotation }; + } + if (segment1 != null) + { + // Represents the segment type of the connector. + diagramConnector.Type = ConnectorSegmentType.Orthogonal; + diagramConnector.Segments = new DiagramObjectCollection { segment1, segment2 }; + } + connectors.Add(diagramConnector); + } + + // Method to create node. + private void CreateNode(string id, double x, double y, NodeFlowShapes shape, string label) + { + Node diagramNode = new Node() + { + //Represents the unique id of the node. + ID = id, + // Defines the position of the node. + OffsetX = x, + OffsetY = y, + // Defines the size of the node. + Width = 145, + Height = 60, + // Defines the style of the node. + Style = new ShapeStyle { Fill = "#357BD2", StrokeColor = "White" }, + // Defines the shape of the node. + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = shape }, + // Defines the annotation collection of the node. + Annotations = new DiagramObjectCollection + { + new ShapeAnnotation + { + Content = label, + Style = new TextStyle() + { + Color="White", + Fill = "transparent" + } + } + } + }; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Gridlines/Appearance.razor b/Diagram/Server/Pages/Gridlines/Appearance.razor new file mode 100644 index 0000000..211ac49 --- /dev/null +++ b/Diagram/Server/Pages/Gridlines/Appearance.razor @@ -0,0 +1,13 @@ +@page "/Appearance" + + +@using Syncfusion.Blazor.Diagram + + + @* Shows both horizontal and vertical gridlines *@ + + @* Customizes the line color and line style to the gridlines *@ + + + + \ No newline at end of file diff --git a/Diagram/Server/Pages/Gridlines/CustomGridline.razor b/Diagram/Server/Pages/Gridlines/CustomGridline.razor new file mode 100644 index 0000000..7a4bb3f --- /dev/null +++ b/Diagram/Server/Pages/Gridlines/CustomGridline.razor @@ -0,0 +1,38 @@ +@page "/CustomGridline" +

customgridline

+ +@using Syncfusion.Blazor.Diagram + + + @* Initialize the diagram snapping the custom interval *@ + + + + + + + + +@code +{ + //Sets the snapinterval... + public double[] SnapInterval { get; set; } = new double[] + { + 10 + }; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node(); + diagramNode.OffsetX = 100; + diagramNode.OffsetY = 100; + diagramNode.Width = 100; + diagramNode.Height = 100; + diagramNode.Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }; + diagramNode.ID = "node1"; + nodes.Add(diagramNode); + } +} diff --git a/Diagram/Server/Pages/Gridlines/CustomizeGridline.razor b/Diagram/Server/Pages/Gridlines/CustomizeGridline.razor new file mode 100644 index 0000000..9f909c3 --- /dev/null +++ b/Diagram/Server/Pages/Gridlines/CustomizeGridline.razor @@ -0,0 +1,22 @@ +@page "/CustomizeGridline" + + +@using Syncfusion.Blazor.Diagram + + + @* Customizes the appearance of the gridlines *@ + + + + + + +@code +{ + public double[] HDotInterval { get; set; } = new double[] { 3, 20, 1, 20, 1, 20 }; + public double[] VDotInterval { get; set; } = new double[] { 3, 20, 1, 20, 1, 20, 1, 20, 1, 20 }; + public double[] HInterval { get; set; } = new double[] { 1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75 }; + public double[] VInterval { get; set; } = new double[] { 1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75 }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Gridlines/CustomizeSnapInterval.razor b/Diagram/Server/Pages/Gridlines/CustomizeSnapInterval.razor new file mode 100644 index 0000000..48114a5 --- /dev/null +++ b/Diagram/Server/Pages/Gridlines/CustomizeSnapInterval.razor @@ -0,0 +1,36 @@ +@page "/CustomizeSnapInterval" + +@using Syncfusion.Blazor.Diagram + + + @* Initialize the diagram snapping the custom interval *@ + + + + + + + + +@code +{ + //Sets the snapinterval... + public double[] SnapInterval { get; set; } = new double[] + { + 10 + }; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node(); + diagramNode.OffsetX = 100; + diagramNode.OffsetY = 100; + diagramNode.Width = 100; + diagramNode.Height = 100; + diagramNode.Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }; + diagramNode.ID = "node1"; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Gridlines/LineInterval.razor b/Diagram/Server/Pages/Gridlines/LineInterval.razor new file mode 100644 index 0000000..daea92c --- /dev/null +++ b/Diagram/Server/Pages/Gridlines/LineInterval.razor @@ -0,0 +1,23 @@ +@page "/LineInterval" + + +@using Syncfusion.Blazor.Diagram + + + @* Customize the appearance of the grid lines *@ + + + + + + + + +@code +{ + //Sets the line intervals for the gridlines + public double[] LineInterval { get; set; } = new double[] + { + 1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15 + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Gridlines/SnapLineStyle.razor b/Diagram/Server/Pages/Gridlines/SnapLineStyle.razor new file mode 100644 index 0000000..f5b026b --- /dev/null +++ b/Diagram/Server/Pages/Gridlines/SnapLineStyle.razor @@ -0,0 +1,38 @@ +@page "/SnapLineStyle" + +@using Syncfusion.Blazor.Diagram + + + + + + +@code +{ + //Sets the Snap to objects constraints. + public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToObject | SnapConstraints.SnapToLines; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + ShapeStyle snapLineStyle = new ShapeStyle() { StrokeColor = "green", StrokeWidth = 3 }; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node(); + diagramNode.OffsetX = 100; + diagramNode.OffsetY = 100; + diagramNode.Width = 100; + diagramNode.Height = 100; + diagramNode.Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }; + diagramNode.ID = "node1"; + nodes.Add(diagramNode); + + diagramNode = new Node(); + diagramNode.OffsetX = 300; + diagramNode.OffsetY = 100; + diagramNode.Width = 100; + diagramNode.Height = 100; + diagramNode.Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }; + diagramNode.ID = "node2"; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Gridlines/SnapToLines.razor b/Diagram/Server/Pages/Gridlines/SnapToLines.razor new file mode 100644 index 0000000..a1b5e45 --- /dev/null +++ b/Diagram/Server/Pages/Gridlines/SnapToLines.razor @@ -0,0 +1,28 @@ +@page "/SnapToLines" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + //Sets the snap constraints + public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToLines; + //Intialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node(); + diagramNode.OffsetX = 100; + diagramNode.OffsetY = 100; + diagramNode.Width = 100; + diagramNode.Height = 100; + diagramNode.Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }; + diagramNode.ID = "node1"; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Gridlines/SnapToObject.razor b/Diagram/Server/Pages/Gridlines/SnapToObject.razor new file mode 100644 index 0000000..ff400c4 --- /dev/null +++ b/Diagram/Server/Pages/Gridlines/SnapToObject.razor @@ -0,0 +1,38 @@ +@page "/SnapToObject" + +@using Syncfusion.Blazor.Diagram + + + + + + +@code +{ + //Sets the Snap to objects constraints... + public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToObject; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node(); + diagramNode.OffsetX = 100; + diagramNode.OffsetY = 100; + diagramNode.Width = 100; + diagramNode.Height = 100; + diagramNode.Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }; + diagramNode.ID = "node1"; + nodes.Add(diagramNode); + + diagramNode = new Node(); + diagramNode.OffsetX = 300; + diagramNode.OffsetY = 100; + diagramNode.Width = 100; + diagramNode.Height = 100; + diagramNode.Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }; + diagramNode.ID = "node2"; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Group/AddChildMethod.razor b/Diagram/Server/Pages/Group/AddChildMethod.razor new file mode 100644 index 0000000..2914fa4 --- /dev/null +++ b/Diagram/Server/Pages/Group/AddChildMethod.razor @@ -0,0 +1,86 @@ +@page "/AddChildMethod" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +@* Initialize the diagram with nodes *@ + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + NodeGroup groupnode = new NodeGroup(); + + protected override void OnInitialized() + { + Node node1 = createNode("node1", 100, 100, "Node1"); + Node node2 = createNode("node2", 300, 100, "Node2"); + // Grouping node 1 and node 2 into a single group + groupnode.Children = new string[] { "node1", "node2" }; + nodes.Add(node1); + nodes.Add(node2); + nodes.Add(groupnode); + } + //Method to create node + public Node createNode(string id, double offx, double offy, string content) + { + Node node = new Node() + { + ID = id, + OffsetX = offx, + OffsetY = offy, + Height = 100, + Width = 100, + Style = new ShapeStyle() { Fill = "#6495ED" } + }; + ShapeAnnotation annotation = new ShapeAnnotation() + { + ID = "annotation1", + Content = content, + Style = new TextStyle() + { + Color = "white", + Fill = "transparent", + StrokeColor = "None" + }, + }; + node.Annotations = new DiagramObjectCollection() + { + annotation + }; + return node; + } + + private async void AddChildToGroup() + { + NodeGroup group = diagram.SelectionSettings.Nodes[0] as NodeGroup; + Node node = new Node() + { + ID = "node" + nodes.Count.ToString(), + OffsetX = 250, + OffsetY = 250, + Width = 50, + Height = 50, + Style = new ShapeStyle() { Fill = "#6495ED" }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Node" + nodes.Count.ToString(), + Style = new TextStyle() + { + Color = "white", + Fill = "transparent", + StrokeColor = "None" + }, + } + } + }; + await diagram.AddChildAsync(group as NodeGroup, node); + } +} diff --git a/Diagram/Server/Pages/Group/AddGroupAtRunTime.razor b/Diagram/Server/Pages/Group/AddGroupAtRunTime.razor new file mode 100644 index 0000000..77a9765 --- /dev/null +++ b/Diagram/Server/Pages/Group/AddGroupAtRunTime.razor @@ -0,0 +1,60 @@ +@page "/AddGroupAtRunTime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +@* Initialize the diagram with NodeCollection *@ + + +@code +{ + //Intialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + NodeGroup groupnode = new NodeGroup(); + + protected override void OnInitialized() + { + Node node1 = createNode("node1", 100, 100, "Node1"); + Node node2 = createNode("node2", 300, 100, "Node2"); + // Grouping node 1 and node 2 into a single group + groupnode.Children = new string[] { "node1", "node2" }; + nodes.Add(node1); + nodes.Add(node2); + } + + public Node createNode(string id, double offx, double offy, string content) + { + Node node = new Node() + { + ID = id, + OffsetX = offx, + OffsetY = offy, + Height = 100, + Width = 100, + Style = new ShapeStyle() { Fill = "#6495ED" } + }; + ShapeAnnotation annotation = new ShapeAnnotation() + { + ID = "annotation1", + Content = content, + Style = new TextStyle() + { + Color = "white", + Fill = "transparent", + StrokeColor = "None" + }, + }; + node.Annotations = new DiagramObjectCollection() +{ + annotation + }; + return node; + } + //Method to add group at runtime + private void AddGroup() + { + nodes.Add(groupnode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Group/CloneNodeGroup.razor b/Diagram/Server/Pages/Group/CloneNodeGroup.razor new file mode 100644 index 0000000..57e9b0f --- /dev/null +++ b/Diagram/Server/Pages/Group/CloneNodeGroup.razor @@ -0,0 +1,80 @@ +@page "/CloneNodeGroup" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@inject IJSRuntime js +@using Syncfusion.Blazor.Buttons + + + + + +@functions +{ + + SfDiagramComponent diagram; + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + OffsetX = 100, + OffsetY = 150, + Height = 100, + Width = 100, + ID = "node1", + + }; + NodeCollection.Add(node1); + Node node2 = new Node() + { + OffsetX = 400, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node2", + + }; + NodeCollection.Add(node2); + NodeGroup group1 = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" }, + OffsetX = 300, + OffsetY = 300, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Group1" + } + }, + }; + NodeCollection.Add(group1); + } + public async Task CloneGroup() + { + Node node2 = NodeCollection[0].Clone() as Node; + node2.ID = RandomId(); + Node node3 = NodeCollection[1].Clone() as Node; + node3.ID = RandomId(); + Node node4 = NodeCollection[2].Clone() as Node; + node4.ID = RandomId(); + string[] array = { node2.ID, node3.ID }; + (node4 as NodeGroup).Children = array; + node4.OffsetX += 25; + node4.OffsetY += 25; + await diagram.AddDiagramElementsAsync(new DiagramObjectCollection() { node2, node3, node4 }); + } + + internal string RandomId() + { + Random random = new Random(); + const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; +#pragma warning disable CA5394 // Do not use insecure randomness + return new string(Enumerable.Repeat(chars, 5) + .Select(s => s[random.Next(s.Length)]).ToArray()); +#pragma warning restore CA5394 // Do not use insecure randomness + } + +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Group/CreateGroup.razor b/Diagram/Server/Pages/Group/CreateGroup.razor new file mode 100644 index 0000000..2194b46 --- /dev/null +++ b/Diagram/Server/Pages/Group/CreateGroup.razor @@ -0,0 +1,82 @@ +@page "/CreateGroup" + +@using Syncfusion.Blazor.Diagram + +@* Initialize the diagram with NodeCollection *@ + + + + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = createNode("node1", 100, 100, "Node1"); + Node node2 = createNode("node2", 300, 100, "Node2"); + Node node3 = createNode("node3", 200, 250, "Node3"); + NodeGroup groupnode = new NodeGroup(); + // Grouping node 1 and node 2 into a single group + groupnode.Children = new string[] { "node1", "node2" }; + nodes.Add(node1); + nodes.Add(node2); + nodes.Add(node3); + nodes.Add(groupnode); + } + + public Node createNode(string id, double offx, double offy, string content) + { + Node node = new Node() + { + ID = id, + OffsetX = offx, + OffsetY = offy, + Height = 100, + Width = 100, + Style = new ShapeStyle() { Fill = "#6495ED" } + }; + ShapeAnnotation annotation = new ShapeAnnotation + { + ID = "annotation1", + Content = content, + Style = new TextStyle() + { + Color = "white", + Fill = "transparent", + StrokeColor = "None" + }, + }; + node.Annotations = new DiagramObjectCollection() + { + annotation + }; + return node; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await Task.Delay(500); + diagram.SelectAll(); + // Adding the third node into the existing group + diagram.Group(); + } + } + + private void AddPadding() + { + if(diagram.Nodes[4] is NodeGroup groupnode) + { + groupnode.Padding = new DiagramThickness() { Left=20, Right= 20, Top=20, Bottom=20 }; + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Group/UnGroup.razor b/Diagram/Server/Pages/Group/UnGroup.razor new file mode 100644 index 0000000..2a014c1 --- /dev/null +++ b/Diagram/Server/Pages/Group/UnGroup.razor @@ -0,0 +1,66 @@ +@page "/UnGroup" + +@using Syncfusion.Blazor.Diagram + + +@* Initialize the diagram with nodes *@ + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = createNode("node1", 100, 100, "Node1"); + Node node2 = createNode("node2", 300, 100, "Node2"); + NodeGroup groupnode = new NodeGroup(); + // Grouping node 1 and node 2 into a single group + groupnode.Children = new string[] { "node1", "node2" }; + nodes.Add(node1); + nodes.Add(node2); + nodes.Add(groupnode); + } + //Method to crate node + public Node createNode(string id, double offx, double offy, string content) + { + Node node = new Node() + { + ID = id, + OffsetX = offx, + OffsetY = offy, + Height = 100, + Width = 100, + Style = new ShapeStyle() { Fill = "#6495ED" } + }; + ShapeAnnotation annotation = new ShapeAnnotation + { + ID = "annotation1", + Content = content, + Style = new TextStyle() + { + Color = "white", + Fill = "transparent", + StrokeColor = "None" + }, + }; + node.Annotations = new DiagramObjectCollection() +{ + annotation + }; + return node; + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + await Task.Delay(500); + diagram.SelectAll(); + // Ungroup the selected group into nodes + diagram.Ungroup(); + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Group/UpdatePositionForGroup.razor b/Diagram/Server/Pages/Group/UpdatePositionForGroup.razor new file mode 100644 index 0000000..3cfe89b --- /dev/null +++ b/Diagram/Server/Pages/Group/UpdatePositionForGroup.razor @@ -0,0 +1,63 @@ +@page "/UpdatePositionForGroup" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +@* Initialize the diagram with NodeCollection *@ + + +@code +{ + //Initilaize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + NodeGroup groupnode = new NodeGroup(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node1 = createNode("node1", 100, 100, "Node1"); + Node node2 = createNode("node2", 300, 100, "Node2"); + // Grouping node 1 and node 2 into a single group + groupnode.Children = new string[] { "node1", "node2" }; + nodes.Add(node1); + nodes.Add(node2); + nodes.Add(groupnode); + } + //Method to create node + public Node createNode(string id, double offx, double offy, string content) + { + Node node = new Node() + { + ID = id, + OffsetX = offx, + OffsetY = offy, + Height = 100, + Width = 100, + Style = new ShapeStyle() { Fill = "#6495ED" } + }; + ShapeAnnotation annotation = new ShapeAnnotation + { + ID = "annotation1", + Content = content, + Style = new TextStyle() + { + Color = "white", + Fill = "transparent", + StrokeColor = "None" + }, + }; + node.Annotations = new DiagramObjectCollection() +{ + annotation + }; + return node; + } + //Method to update position at runtime + private void UpdatePosition() + { + nodes[2].OffsetX = 500; + nodes[2].OffsetY = 200; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Index.razor b/Diagram/Server/Pages/Index.razor new file mode 100644 index 0000000..76cc14e --- /dev/null +++ b/Diagram/Server/Pages/Index.razor @@ -0,0 +1,56 @@ +@page "/" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + // Reference to diagram + SfDiagramComponent diagram; + // Initialize diagram's node collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 500, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + nodes.Add(node3); + } + //Method to align all the selected objectes at bottom of selection boundary + private void OnAlignBottom() + { + diagram.SetAlign(AlignmentOptions.Bottom); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Interaction/CloneSelectedItems.razor b/Diagram/Server/Pages/Interaction/CloneSelectedItems.razor new file mode 100644 index 0000000..aa3f157 --- /dev/null +++ b/Diagram/Server/Pages/Interaction/CloneSelectedItems.razor @@ -0,0 +1,204 @@ +@page "/CloneSelectedItems" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@inject IJSRuntime js +@using Syncfusion.Blazor.Buttons + + + + +@functions +{ + double offsetX = 0; + double offsetY = 0; + double opacity = 0; + public string ID = "diagram"; + SfDiagramComponent diagram; + public string Height { get; set; } = "700px"; + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + public DiagramObjectCollection Connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "node1" + }, + }, + }; + NodeCollection.Add(node1); + Node node2 = new Node() + { + ID = "node2", + OffsetX = 100, + OffsetY = 300, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "node2" + }, + }, + }; + NodeCollection.Add(node2); + NodeGroup group1 = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Group1" + } + }, + }; + NodeCollection.Add(group1); + Node node3 = new Node() + { + ID = "node3", + OffsetX = 300, + OffsetY = 100, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "node3" + }, + }, + }; + NodeCollection.Add(node3); + Connector connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 250, Y = 250 }, + TargetPoint = new DiagramPoint() { X = 350, Y = 350 }, + }; + Connectors.Add(connector); + NodeGroup group2 = new NodeGroup() + { + ID = "group2", + Children = new string[] { "node3", "connector1", "group1" }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Group2" + } + }, + }; + NodeCollection.Add(group2); + } + public void Clone() + { + diagram.StartGroupAction(); + if (diagram.SelectionSettings.Nodes.Count > 0) + { + NodeBase NodeObj = diagram.SelectionSettings.Nodes[0] as NodeBase; + if (NodeObj is NodeGroup gNode) + { + CloneGroup(gNode, false); + } + else if (NodeObj is Node node) + { + CloneNode(node, false); + } + } + if (diagram.SelectionSettings.Connectors.Count > 0) + { + NodeBase ConnectorObj = diagram.SelectionSettings.Connectors[0] as NodeBase; + if (ConnectorObj is Connector connectorObj) + { + CloneConnector(connectorObj, false); + } + } + diagram.ClearSelection(); + diagram.EndGroupAction(); + } + public string CloneGroup(NodeGroup gNode, bool isChild) + { + NodeGroup groupNode = gNode.Clone() as NodeGroup; + groupNode.ID = RandomId(); + List child = new List(); + foreach (string childID in groupNode.Children) + { + for (int i = 0; i < diagram.Nodes.Count; i++) + { + if (childID == diagram.Nodes[i].ID && diagram.Nodes[i] is NodeGroup nodeGroup) + { + child.Add(CloneGroup(nodeGroup, true)); + } + else if (childID == diagram.Nodes[i].ID) + { + child.Add(CloneNode(diagram.Nodes[i], true)); + } + } + for (int i = 0; i < diagram.Connectors.Count; i++) + { + if (childID == diagram.Connectors[i].ID) + { + child.Add(CloneConnector(diagram.Connectors[i], true)); + } + } + } + groupNode.Children = child.ToArray(); + if (!isChild) + { + groupNode.OffsetX += 25; + groupNode.OffsetY += 25; + } + _ = diagram.AddDiagramElementsAsync(new DiagramObjectCollection() { groupNode }); + return groupNode.ID; + } + public string CloneNode(Node node, bool isChild) + { + diagram.StartGroupAction(); + Node nodeChild = node.Clone() as Node; + nodeChild.ID = RandomId(); + if (!isChild) + { + nodeChild.OffsetX += 25; + nodeChild.OffsetY += 25; + } + _ = diagram.AddDiagramElementsAsync(new DiagramObjectCollection() { nodeChild }); + diagram.EndGroupAction(); + return nodeChild.ID; + } + public string CloneConnector(Connector connector, bool isChild) + { + diagram.StartGroupAction(); + Connector connectorChild = connector.Clone() as Connector; + connectorChild.ID = RandomId(); + if (!isChild) + { + connectorChild.SourcePoint = new DiagramPoint() { X = connectorChild.SourcePoint.X + 25, Y = connectorChild.SourcePoint.Y + 25 }; + connectorChild.TargetPoint = new DiagramPoint() { X = connectorChild.TargetPoint.X + 25, Y = connectorChild.TargetPoint.Y + 25 }; + } + _ = diagram.AddDiagramElementsAsync(new DiagramObjectCollection() { connectorChild }); + diagram.EndGroupAction(); + return connectorChild.ID; + } + + internal string RandomId() + { + Random random = new Random(); + const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; +#pragma warning disable CA5394 // Do not use insecure randomness + return new string(Enumerable.Repeat(chars, 5) + .Select(s => s[random.Next(s.Length)]).ToArray()); +#pragma warning restore CA5394 // Do not use insecure randomness + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Interaction/CurrentSelection.razor b/Diagram/Server/Pages/Interaction/CurrentSelection.razor new file mode 100644 index 0000000..b3e98d6 --- /dev/null +++ b/Diagram/Server/Pages/Interaction/CurrentSelection.razor @@ -0,0 +1,82 @@ +@page "/CurrentSelection" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons +@using SelectionChangedEventArgs = Syncfusion.Blazor.Diagram.SelectionChangedEventArgs + + + + +@code { + SfDiagramComponent diagram; + //Initailize the diagram's nodes collection + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + //Initailize the diagram's connector collection + public DiagramObjectCollection ConnectorCollection = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + OffsetX = 100, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node1", + }; + NodeCollection.Add(node1); + Connector connector1 = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 300, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 300 }, + Type = ConnectorSegmentType.Orthogonal + }; + ConnectorCollection.Add(connector1); + } + //Event to notify selection changing event after selected the nodes/conenctors in diagram. + private void OnSelectionChanged(SelectionChangedEventArgs args) + { + if (diagram.SelectionSettings.Nodes.Count > 0) + { + Node selectedNode = diagram.SelectionSettings.Nodes[0]; + //Here you can modified the selected node. + } + if (diagram.SelectionSettings.Connectors.Count > 0) + { + Connector selectedConnector = diagram.SelectionSettings.Connectors[0]; + //Here you can modified the selected connector. + } + } + + // Method to get current selection information + private void GetSelectionInfo() + { + // Get selected nodes + var selectedNodes = diagram.SelectionSettings.Nodes; + foreach (var node in selectedNodes) + { + Console.WriteLine($"Selected Node ID: {node.ID}"); + Console.WriteLine($"Node OffsetX: {node.OffsetX}"); + Console.WriteLine($"Node OffsetY: {node.OffsetY}"); + Console.WriteLine($"Node Width: {node.Width}"); + Console.WriteLine($"Node Height: {node.Height}"); + Console.WriteLine($"Node Rotation: {node.RotationAngle}"); + } + + // Get selected connectors + var selectedConnectors = diagram.SelectionSettings.Connectors; + foreach (var connector in selectedConnectors) + { + Console.WriteLine($"Selected Connector ID: {connector.ID}"); + Console.WriteLine($"Connector SourcePoint: X={connector.SourcePoint.X}, Y={connector.SourcePoint.Y}"); + Console.WriteLine($"Connector TargetPoint: X={connector.TargetPoint.X}, Y={connector.TargetPoint.Y}"); + } + + // Get selection bounds information + Console.WriteLine($"Selection OffsetX: {diagram.SelectionSettings.OffsetX}"); + Console.WriteLine($"Selection OffsetY: {diagram.SelectionSettings.OffsetY}"); + Console.WriteLine($"Selection Width: {diagram.SelectionSettings.Width}"); + Console.WriteLine($"Selection Height: {diagram.SelectionSettings.Height}"); + Console.WriteLine($"Selection Rotation: {diagram.SelectionSettings.RotationAngle}"); + Console.WriteLine($"Selection Pivot: {diagram.SelectionSettings.Pivot}"); + } +} diff --git a/Diagram/Server/Pages/Interaction/DiagramConnectionEvent.razor b/Diagram/Server/Pages/Interaction/DiagramConnectionEvent.razor new file mode 100644 index 0000000..f79d67c --- /dev/null +++ b/Diagram/Server/Pages/Interaction/DiagramConnectionEvent.razor @@ -0,0 +1,74 @@ +@page "/DiagramConnectionEvent" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Initailize the diagram's nodes collection + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + //Initailize the diagram's connectors collection + public DiagramObjectCollection Connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + OffsetX = 100, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node1", + }; + NodeCollection.Add(node1); + + Node node2 = new Node() + { + OffsetX = 300, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node2", + }; + NodeCollection.Add(node2); + + Connector Connector = new Connector() + { + ID = "connector1", + //Source node id of the connector. + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + //Target node id of the connector. + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + // Type of the connector + Type = ConnectorSegmentType.Straight, + }; + Connectors.Add(Connector); + } + //Event to notify while creating the connection between the nodes in the diagram. + private void OnConnectionChanging(ConnectionChangingEventArgs args) + { + //sets true to cancel creating the connection betweent the nodes + args.Cancel = true; + } + //Event to notify once created the connection between the nodes in the diagram. + private void OnConnectionChanged(ConnectionChangedEventArgs args) + { + //Action to be performed. + } +} diff --git a/Diagram/Server/Pages/Interaction/DiagramHighlighter.razor b/Diagram/Server/Pages/Interaction/DiagramHighlighter.razor new file mode 100644 index 0000000..f029d30 --- /dev/null +++ b/Diagram/Server/Pages/Interaction/DiagramHighlighter.razor @@ -0,0 +1,101 @@ +@page "/DiagramHighlighter" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + + + +@code { + SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + OffsetX = 200, + OffsetY = 230, + Height = 100, + Width = 100, + ID = "node1", + Style = new ShapeStyle() { Fill = "#5E94EF", StrokeColor = "#5E94EF" }, + Shape = new BasicShape() + { + Shape = NodeBasicShapes.Diamond, + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + OffsetX = 480, + OffsetY = 230, + Height = 100, + Width = 100, + ID = "node2", + Style = new ShapeStyle() { Fill = "#5E94EF", StrokeColor = "#5E94EF" }, + Shape = new BasicShape() + { + Shape = NodeBasicShapes.Diamond, + }, + }; + nodes.Add(node2); + + Node node3 = new Node() + { + OffsetX = 335, + OffsetY = 330, + Height = 100, + Width = 100, + ID = "node3", + Style = new ShapeStyle() { Fill = "#5E94EF", StrokeColor = "#5E94EF" }, + Shape = new BasicShape() + { + Shape = NodeBasicShapes.Diamond, + }, + }; + nodes.Add(node3); + + Node node4 = new Node() + { + OffsetX = 200, + OffsetY = 400, + Height = 100, + Width = 100, + ID = "node4", + Style = new ShapeStyle() { Fill = "#5E94EF", StrokeColor = "#5E94EF" }, + Shape = new BasicShape() + { + Shape = NodeBasicShapes.Diamond, + }, + }; + nodes.Add(node4); + + Node node5 = new Node() + { + OffsetX = 480, + OffsetY = 400, + Height = 100, + Width = 100, + ID = "node5", + Style = new ShapeStyle() { Fill = "#5E94EF", StrokeColor = "#5E94EF" }, + Shape = new BasicShape() + { + Shape = NodeBasicShapes.Diamond, + }, + }; + nodes.Add(node5); + + } +} diff --git a/Diagram/Server/Pages/Interaction/DiagramPositionEvent.razor b/Diagram/Server/Pages/Interaction/DiagramPositionEvent.razor new file mode 100644 index 0000000..c8e72e6 --- /dev/null +++ b/Diagram/Server/Pages/Interaction/DiagramPositionEvent.razor @@ -0,0 +1,34 @@ +@page "/DiagramPositionEvent" +@using Syncfusion.Blazor.Diagram + + + +@code { + //Intialize the diagram's nodes collection + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node4 = new Node() + { + OffsetX = 100, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node4", + }; + NodeCollection.Add(node4); + } + //Event to notify while dragging the elements in the diagram. + private void OnPositionChanging(PositionChangingEventArgs args) + { + //sets true to cancel the element's dragging + args.Cancel = true; + } + //Event to notify once element's position has changed in the diagram'. + private void OnPositionChanged(PositionChangedEventArgs args) + { + //Action to be performed. + } +} diff --git a/Diagram/Server/Pages/Interaction/DiagramRotateEvent.razor b/Diagram/Server/Pages/Interaction/DiagramRotateEvent.razor new file mode 100644 index 0000000..8b77d03 --- /dev/null +++ b/Diagram/Server/Pages/Interaction/DiagramRotateEvent.razor @@ -0,0 +1,37 @@ +@page "/DiagramRotateEvent" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Initailize the diagram's nodes collection + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 100, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node", + }; + NodeCollection.Add(node); + } + //Event to notify while rotating the elements in the diagram. + private void OnRotationChanging(RotationChangingEventArgs args) + { + //sets true to cancel the element's resizing + args.Cancel = true; + } + //Event to notify once element's rotate angle has changed in the diagram'. + private void OnRotationChanged(RotationChangedEventArgs args) + { + //Action to be performed. + } +} diff --git a/Diagram/Server/Pages/Interaction/DiagramSelectionEvent.razor b/Diagram/Server/Pages/Interaction/DiagramSelectionEvent.razor new file mode 100644 index 0000000..c26a080 --- /dev/null +++ b/Diagram/Server/Pages/Interaction/DiagramSelectionEvent.razor @@ -0,0 +1,34 @@ +@page "/DiagramSelectionEvent" +@using Syncfusion.Blazor.Diagram + + + +@code { + //Initailize the diagram's nodes collection + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node4 = new Node() + { + OffsetX = 100, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node4", + }; + NodeCollection.Add(node4); + } + //Event to notify selection changing event before select the nodes/conenctors in diagram. + private void OnSelectionChanging(SelectionChangingEventArgs args) + { + //sets true to cancel the element + args.Cancel = true; + } + //Event to notify selection changing event after selected the nodes/conenctors in diagram. + private void OnSelectionChanged(SelectionChangedEventArgs args) + { + //Action to be performed. + } +} diff --git a/Diagram/Server/Pages/Interaction/DiagramSizeEvent.razor b/Diagram/Server/Pages/Interaction/DiagramSizeEvent.razor new file mode 100644 index 0000000..231b6c8 --- /dev/null +++ b/Diagram/Server/Pages/Interaction/DiagramSizeEvent.razor @@ -0,0 +1,35 @@ +@page "/DiagramSizeEvent" +@using Syncfusion.Blazor.Diagram + + + +@code { + //Initailize the diagram's nodes collection + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 100, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node", + }; + NodeCollection.Add(node); + } + //Event to notify while resizing the elements in the diagram. + private void OnSizeChanging(SizeChangingEventArgs args) + { + //sets true to cancel the element's resizing + args.Cancel = true; + } + //Event to notify once element's size has changed in the diagram'. + private void OnSizeChanged(SizeChangedEventArgs args) + { + //Action to be performed. + } +} + diff --git a/Diagram/Server/Pages/Interaction/MouseClick.razor b/Diagram/Server/Pages/Interaction/MouseClick.razor new file mode 100644 index 0000000..df1d278 --- /dev/null +++ b/Diagram/Server/Pages/Interaction/MouseClick.razor @@ -0,0 +1,34 @@ +@page "/MouseClick" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + public DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + // Add node + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeDashArray = "5,5", StrokeColor = "red", StrokeWidth = 2 }, + }; + nodes.Add(node); + } + + private async void OnClick(ClickEventArgs args) + { + Console.WriteLine("Button", args.Button); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Interaction/RubberBandSelectionMode.razor b/Diagram/Server/Pages/Interaction/RubberBandSelectionMode.razor new file mode 100644 index 0000000..c909f4e --- /dev/null +++ b/Diagram/Server/Pages/Interaction/RubberBandSelectionMode.razor @@ -0,0 +1,92 @@ +@page "/RubberBandSelectionMode" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@inject IJSRuntime js +@using Syncfusion.Blazor.Buttons + + + +@functions +{ + + public string ID = "diagram"; + SfDiagramComponent diagram; + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + public DiagramObjectCollection Connectors = new DiagramObjectCollection(); + DiagramSelectionSettings select; + protected override void OnInitialized() + { + select = new DiagramSelectionSettings() { RubberBandSelectionMode = RubberBandSelectionMode.CompleteIntersect }; + Node node1 = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "node1" + }, + }, + }; + NodeCollection.Add(node1); + Node node2 = new Node() + { + ID = "node2", + OffsetX = 100, + OffsetY = 300, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "node2" + }, + }, + }; + NodeCollection.Add(node2); + NodeGroup group1 = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Group1" + } + }, + }; + NodeCollection.Add(group1); + Node node3 = new Node() + { + ID = "node3", + OffsetX = 300, + OffsetY = 100, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "node3" + }, + }, + }; + NodeCollection.Add(node3); + Connector connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 250, Y = 250 }, + TargetPoint = new DiagramPoint() { X = 350, Y = 350 }, + }; + Connectors.Add(connector); + + } + +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Interaction/SegmentEditing.razor b/Diagram/Server/Pages/Interaction/SegmentEditing.razor new file mode 100644 index 0000000..c790f39 --- /dev/null +++ b/Diagram/Server/Pages/Interaction/SegmentEditing.razor @@ -0,0 +1,62 @@ +@page "/SegmentEditing" + +@using Syncfusion.Blazor.Diagram + + + +@code { + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + // Enable DragSegmentThumb constraints to segment editing + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, + TargetPoint = new DiagramPoint() { X = 300, Y = 300 }, + //Specify the segments type as Orthogonal. + Type = ConnectorSegmentType.Orthogonal, + //Create a new segment with length and direction + Segments = new DiagramObjectCollection() + { + new OrthogonalSegment + { + Length = 100, + Type = ConnectorSegmentType.Orthogonal, + Direction = Direction.Right, + }, + new OrthogonalSegment + { + Length = 100, + Type = ConnectorSegmentType.Orthogonal, + Direction = Direction.Bottom, + } + }, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6f409f", + StrokeColor = "#6f409f", + StrokeWidth = 1 + } + } + + }; + connectors.Add(Connector); + } + //Event to notify while modifying the segment collection for the connector. + private void OnSegmentChange(SegmentCollectionChangeEventArgs args) + { + //Action to be perform... + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Interaction/SelectedElements.razor b/Diagram/Server/Pages/Interaction/SelectedElements.razor new file mode 100644 index 0000000..feb7b9b --- /dev/null +++ b/Diagram/Server/Pages/Interaction/SelectedElements.razor @@ -0,0 +1,47 @@ +@page "/SelectedElements" +@using Syncfusion.Blazor.Diagram + + + +@code { + SfDiagramComponent diagram; + //Initailize the diagram's nodes collection + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + //Initailize the diagram's connector collection + public DiagramObjectCollection ConnectorCollection = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + OffsetX = 100, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node1", + }; + NodeCollection.Add(node1); + Connector connector1 = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 300, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 300 }, + Type = ConnectorSegmentType.Orthogonal + }; + ConnectorCollection.Add(connector1); + } + //Event to notify selection changing event after selected the nodes/conenctors in diagram. + private void OnSelectionChanged(SelectionChangedEventArgs args) + { + if (diagram.SelectionSettings.Nodes.Count > 0) + { + Node selectedNode = diagram.SelectionSettings.Nodes[0]; + //Here you can modified the selected node. + } + if (diagram.SelectionSettings.Connectors.Count > 0) + { + Connector selectedConnector = diagram.SelectionSettings.Connectors[0]; + //Here you can modified the selected connector. + } + } +} diff --git a/Diagram/Server/Pages/Interaction/UnSelectSample.razor b/Diagram/Server/Pages/Interaction/UnSelectSample.razor new file mode 100644 index 0000000..2d7d61e --- /dev/null +++ b/Diagram/Server/Pages/Interaction/UnSelectSample.razor @@ -0,0 +1,27 @@ +@page "/UnSelectSample" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + DiagramObjectCollection nodes; + DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings() { CanToggleSelection = true }; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + nodes.Add(node); + + } +} diff --git a/Diagram/Server/Pages/Layout/BasicLayout.razor b/Diagram/Server/Pages/Layout/BasicLayout.razor new file mode 100644 index 0000000..0797c83 --- /dev/null +++ b/Diagram/Server/Pages/Layout/BasicLayout.razor @@ -0,0 +1,61 @@ +@page "/BasicLayout" +@using Syncfusion.Blazor.Diagram + + + + + + + + + + + + +@code +{ + //Defines diagram's connector collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Defines diagram's node collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + LayoutType type = LayoutType.ComplexHierarchicalTree; + int HorizontalSpacing = 50; + int VerticalSpacing = 50; + + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 60; + node.Width = 110; + node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeWidth = 2, StrokeColor = "none" }; + } + + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).CornerRadius = 5; + (connector as Connector).TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6CA0DC", StrokeColor = "#6CA0DC" } }; + (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6CA0DC" }; + } + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection() + { + new Node() { ID="node1", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="CEO"} } }, + new Node() { ID="node2", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="COO"} } }, + new Node() { ID="node3", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Marketing Head"} } }, + new Node() { ID="node4", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Product Head"} } }, + new Node() { ID="node5", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Customer Support Lead"} } }, + new Node() { ID="node6", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Warehouse Manager"} } }, + }; + connectors = new DiagramObjectCollection() + { + new Connector() { ID="connector1", SourceID="node1", TargetID="node2" }, + new Connector() { ID="connector2", SourceID="node1", TargetID="node3" }, + new Connector() { ID="connector3", SourceID="node1", TargetID="node4" }, + new Connector() { ID="connector4", SourceID="node1", TargetID="node5" }, + new Connector() { ID="connector5", SourceID="node1", TargetID="node6" } + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/ComplexHierarchicalTree.razor b/Diagram/Server/Pages/Layout/ComplexHierarchicalTree.razor new file mode 100644 index 0000000..bc841ab --- /dev/null +++ b/Diagram/Server/Pages/Layout/ComplexHierarchicalTree.razor @@ -0,0 +1,64 @@ +@page "/ComplexHierarchicalTree" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + + + + +@code +{ + + //Initailize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initailize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + int HorizontalSpacing = 40; + int VerticalSpacing = 40; + //Method to set node's default properties + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 40; + node.Width = 50; + //Initializing the default node's shape style. + node.Style = new ShapeStyle() { Fill = "#6CA0DC", StrokeColor = "#6CA0DC" }; + node.Annotations[0].Style = new TextStyle() { Color = "white", Bold = true }; + } + //Method to set connector's default properties + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).CornerRadius = 5; + (connector as Connector).TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6CA0DC", StrokeColor = "#6CA0DC" } }; + (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6CA0DC" }; + + } + + protected override void OnInitialized() + { + //Initializing node and connectors. + nodes = new DiagramObjectCollection() + { + new Node() { ID="node1", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="node1"} } }, + new Node() { ID="node2", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="node2"} } }, + new Node() { ID="node3", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="node3"} } }, + new Node() { ID="node4", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="node4"} } }, + new Node() { ID="node5", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="node5"} } }, + }; + connectors = new DiagramObjectCollection() + { + new Connector() { ID="connector1", SourceID="node1", TargetID="node4" }, + new Connector() { ID="connector2", SourceID="node2", TargetID="node4" }, + new Connector() { ID="connector3", SourceID="node3", TargetID="node4" }, + new Connector() { ID="connector4", SourceID="node4", TargetID="node5" }, + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/DataLoadedEvent.razor b/Diagram/Server/Pages/Layout/DataLoadedEvent.razor new file mode 100644 index 0000000..1150e29 --- /dev/null +++ b/Diagram/Server/Pages/Layout/DataLoadedEvent.razor @@ -0,0 +1,88 @@ +@page "/DataLoadedEvent" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + +@code +{ + public SfDiagramComponent diagram; + double top = 50; + double bottom = 50; + double right = 50; + double left = 50; + LayoutType type = LayoutType.OrganizationalChart; + LayoutOrientation oreintation = LayoutOrientation.TopToBottom; + HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + int HorizontalSpacing = 30; + int VerticalSpacing = 30; + private string FixedNode = null; + public class HierarchicalDetails + { + public string Id { get; set; } + public string Role { get; set; } + public string Manager { get; set; } + public string ChartType { get; set; } + public string Color { get; set; } + } + public List DataSource = new List() + { + new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" } + + }; + private void NodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data is System.Text.Json.JsonElement) + { + node.Data = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString()); + } + HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails; + node.Width = 150; + node.Height = 50; + node.Style.Fill = hierarchicalData.Color; + // node.IsVisible = false; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = hierarchicalData.Role, + Style =new TextStyle(){Color = "white"} + } + }; + } + private void ConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; + } + private void DataLoaded(object args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/FlowchartLayout/CustomYesOrNoBranch.razor b/Diagram/Server/Pages/Layout/FlowchartLayout/CustomYesOrNoBranch.razor new file mode 100644 index 0000000..55bdbfd --- /dev/null +++ b/Diagram/Server/Pages/Layout/FlowchartLayout/CustomYesOrNoBranch.razor @@ -0,0 +1,150 @@ +@page "/CustomYesOrNoBranch" + +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + //Initialize diagram component. + SfDiagramComponent Diagram; + //Initialize flowchart layout settings. + FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings() + { + YesBranchValues = new List { "Accept", "Yes" }, + NoBranchValues = new List { "Reject", "No" }, + }; + + private void OnDataLoaded(object obj) + { + for (int i = 0; i < Diagram.Connectors.Count; i++) + { + var connector = Diagram.Connectors[i]; + var node = Diagram.GetObject(connector.TargetID) as Node; + var srcNode = Diagram.GetObject(connector.SourceID) as Node; + if (node.Data != null && node.Data is ItemInfo itemInfo) + { + if (itemInfo.Label != null && itemInfo.Label.Count > 0) + { + if (itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id) != -1) + { + var parentIndex = itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id); + if (itemInfo.Label.Count > parentIndex) + { + connector.Annotations = new DiagramObjectCollection() + { + new PathAnnotation() { Content = itemInfo.Label[parentIndex], Style = new TextStyle(){ Bold = true} } + }; + } + } + } + } + } + } + //Creates connectors with some default values. + private void OnConnectorCreating(IDiagramObject obj) + { + if (obj is Connector connector) + { + connector.Type = ConnectorSegmentType.Orthogonal; + connector.Style.Fill = "#6CA0DC"; + connector.Style.StrokeColor = "#6CA0DC"; + connector.Style.StrokeWidth = 2; + connector.TargetDecorator.Style.Fill = "#6CA0DC"; + connector.TargetDecorator.Style.StrokeColor = "#6CA0DC"; + } + } + //Creates nodes with some default values. + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data != null && node.Data is ItemInfo) + { + ItemInfo employeeDetails = node.Data as ItemInfo; + node.Width = employeeDetails._Width; + node.Height = employeeDetails._Height; + if (employeeDetails._Shape == "StartOrEnd") + { + node.Shape = new FlowShape() { Shape = NodeFlowShapes.Terminator }; + } + else + node.Shape = new FlowShape() { Shape = (NodeFlowShapes)Enum.Parse(typeof(NodeFlowShapes), employeeDetails._Shape.ToString()) }; + node.Style.Fill = employeeDetails._Color; + node.Style.StrokeColor = employeeDetails._Color; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation(){ Content = employeeDetails.Name, Style = new TextStyle(){ Color = "black", Bold = true} } + }; + } + } + //Initialize data source collection. + public List DataSource = new List(){ +new ItemInfo() +{ + Id = "1", + Name = "Start", + _Shape = "StartOrEnd", + _Width = 100, + _Height = 50, + _Color = "#6CA0DC" + }, + new ItemInfo() +{ + Id = "2", + Name = "Decision?", + ParentId = new List { "1" }, + _Shape = "Decision", + _Width = 100, + _Height = 80, + _Color = "#6CA0DC" + }, + new ItemInfo() +{ + Id = "3", + Label = new List { "Reject" }, + Name = "Process1", + ParentId = new List { "2" }, + _Shape = "Process", + _Width = 100, + _Height = 60, + _Color = "#6CA0DC" + }, + new ItemInfo() +{ + Id = "4", + Label = new List { "Accept" }, + Name = "Process2", + ParentId = new List() { "2" }, + _Shape = "Process", + _Width = 100, + _Height = 60, + _Color = "#6CA0DC" + }, + new ItemInfo() +{ + Id = "5", + Name = "End", + ParentId = new List { "4"}, + _Shape = "Terminator", + _Width = 100, + _Height = 50, + _Color = "#6CA0DC" + }, +}; + public class ItemInfo + { + public string Name { get; set; } + public string Id { get; set; } + public List Label { get; set; } + public List ParentId { get; set; } + public string _Shape { get; set; } + public double _Width { get; set; } + public double _Height { get; set; } + public string _Color { get; set; } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayout.razor b/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayout.razor new file mode 100644 index 0000000..e9df834 --- /dev/null +++ b/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayout.razor @@ -0,0 +1,180 @@ +@page "/FlowchartLayout" + +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + //Initialize diagram component. + SfDiagramComponent Diagram; + //Initialize flowchart layout settings. + FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings() + { + YesBranchDirection = BranchDirection.LeftInFlow, + NoBranchDirection = BranchDirection.RightInFlow + }; + + private void OnDataLoaded(object obj) + { + for (int i = 0; i < Diagram.Connectors.Count; i++) + { + var connector = Diagram.Connectors[i]; + var node = Diagram.GetObject(connector.TargetID) as Node; + var srcNode = Diagram.GetObject(connector.SourceID) as Node; + if (node.Data != null && node.Data is ItemInfo itemInfo) + { + if (itemInfo.Label != null && itemInfo.Label.Count > 0) + { + if (itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id) != -1) + { + var parentIndex = itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id); + if (itemInfo.Label.Count > parentIndex) + { + connector.Annotations = new DiagramObjectCollection() + { + new PathAnnotation() { Content = itemInfo.Label[parentIndex], Style = new TextStyle(){ Bold = true} } + }; + } + } + } + } + } + } + //Creates connectors with some default values. + private void OnConnectorCreating(IDiagramObject obj) + { + if (obj is Connector connector) + { + connector.Type = ConnectorSegmentType.Orthogonal; + connector.Style.Fill = "#6CA0DC"; + connector.Style.StrokeColor = "#6CA0DC"; + connector.Style.StrokeWidth = 2; + connector.TargetDecorator.Style.Fill = "#6CA0DC"; + connector.TargetDecorator.Style.StrokeColor = "#6CA0DC"; + } + } + //Creates nodes with some default values. + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data != null && node.Data is ItemInfo) + { + ItemInfo employeeDetails = node.Data as ItemInfo; + node.Width = employeeDetails._Width; + node.Height = employeeDetails._Height; + if (employeeDetails._Shape == "StartOrEnd") + { + node.Shape = new FlowShape() { Shape = NodeFlowShapes.Terminator }; + } + else + node.Shape = new FlowShape() { Shape = (NodeFlowShapes)Enum.Parse(typeof(NodeFlowShapes), employeeDetails._Shape.ToString()) }; + node.Style.Fill = employeeDetails._Color; + node.Style.StrokeColor = employeeDetails._Color; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation(){ Content = employeeDetails.Name, Style = new TextStyle(){ Color = "black", Bold = true} } + }; + } + } + //Initialize data source collection. + public List DataSource = new List(){ + new ItemInfo() + { + Id = "1", + Name = "Start", + _Shape = "StartOrEnd", + _Width = 80, + _Height = 35, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "2", + Name = "Input", + ParentId = new List { "1" }, + _Shape = "Data", + _Width = 90, + _Height = 35, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "3", + Name = "Decision?", + ParentId = new List { "2" }, + _Shape = "Decision", + _Width = 80, + _Height = 60, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "4", + Label = new List { "No" }, + Name = "Process1", + ParentId = new List { "3" }, + _Shape = "Process", + _Width = 80, + _Height = 40, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "5", + Label = new List { "Yes" }, + Name = "Process2", + ParentId = new List() { "3" }, + _Shape = "Process", + _Width = 80, + _Height = 40, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "6", + Name = "Output", + ParentId = new List { "5" }, + _Shape = "Data", + _Width = 90, + _Height = 35, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "7", + Name = "Output", + ParentId = new List { "4" }, + _Shape = "Data", + _Width = 90, + _Height = 35, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "8", + Name = "End", + ParentId = new List { "6","7" }, + _Shape = "Terminator", + _Width = 80, + _Height = 35, + _Color = "#6CA0DC" + }, + }; + public class ItemInfo + { + public string Name { get; set; } + public string Id { get; set; } + public List Label { get; set; } + public List ParentId { get; set; } + public string _Shape { get; set; } + public double _Width { get; set; } + public double _Height { get; set; } + public string _Color { get; set; } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutForGmail.razor b/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutForGmail.razor new file mode 100644 index 0000000..5fc9153 --- /dev/null +++ b/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutForGmail.razor @@ -0,0 +1,119 @@ +@page "/FlowchartLayoutForGmail" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + + + + + +@code { + FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings() + { + //Set the decision yes branch direction + YesBranchDirection = BranchDirection.LeftInFlow, + //Set the decision no branch direction + NoBranchDirection = BranchDirection.RightInFlow, + //Set the custom yes branch values + YesBranchValues = new List { "Yes", "Existing" }, + //Set the custom no branch values + NoBranchValues = new List { "No", "New" }, + }; + public SfDiagramComponent Diagram; + public int? HValue { get; set; } = 60; + public int? VValue { get; set; } = 40; + public LayoutType Type = LayoutType.Flowchart; + public LayoutOrientation OrientationType = LayoutOrientation.TopToBottom; + public int HorizontalSpacing = 50; + public int VerticalSpacing = 50; + private void OnDataLoaded(object obj) + { + for (int i = 0; i < Diagram.Connectors.Count; i++) + { + var connector = Diagram.Connectors[i]; + var node = Diagram.GetObject(connector.TargetID) as Node; + var srcNode = Diagram.GetObject(connector.SourceID) as Node; + if (node.Data != null && node.Data is NodeInfo NodeInfo) + { + if (NodeInfo.LineText != null && NodeInfo.LineText.Count > 0) + { + if (NodeInfo.ParentId.IndexOf((srcNode.Data as NodeInfo).Id) != -1) + { + var parentIndex = NodeInfo.ParentId.IndexOf((srcNode.Data as NodeInfo).Id); + if (NodeInfo.LineText.Count > parentIndex) + { + connector.Annotations = new DiagramObjectCollection() + { + new PathAnnotation() { Content = NodeInfo.LineText[parentIndex], Style=new TextStyle(){Fill="White" } } + }; + } + } + } + } + } + } + private void OnConnectorCreating(IDiagramObject obj) + { + if (obj is Connector connector) + { + connector.Type = ConnectorSegmentType.Orthogonal; + } + } + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data != null && node.Data is NodeInfo) + { + NodeInfo employeeDetails = node.Data as NodeInfo; + node.Width = employeeDetails.Width; + node.Height = employeeDetails.Height; + if (employeeDetails.Shape == "Rectangle") + { + node.Shape = new FlowShape() { Shape = NodeFlowShapes.Process }; + } + else if (employeeDetails.Shape == "StartOrEnd") + { + node.Shape = new FlowShape() { Shape = NodeFlowShapes.Terminator }; + } + else + node.Shape = new FlowShape() { Shape = (NodeFlowShapes)Enum.Parse(typeof(NodeFlowShapes), employeeDetails.Shape.ToString()) }; + node.Style.Fill = employeeDetails.Color; + node.Style.StrokeColor = employeeDetails.Color; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation(){ Content = employeeDetails.Description, Style = new TextStyle(){ Color="white"} } + }; + } + } + public List DataSource = new List() + { + new NodeInfo() { Id = "1", Description = "Start", Shape = "StartOrEnd", Width = 100, Height = 30, Color = "#8E44CC" }, + new NodeInfo() { Id = "2", Description = "Open Gmail site in browser", ParentId = new List { "1" }, Shape = "Rectangle", Width = 120, Height = 50, Color = "#1759B7" }, + new NodeInfo() { Id = "3", Description = "Existing \nor \nnew user?", ParentId = new List { "2" }, Shape = "Decision", Width = 130, Height = 80, Color = "#2F95D8" }, + new NodeInfo() { Id = "4", LineText = new List { "New" }, Description = "Create an account", ParentId = new List { "3" }, Shape = "Rectangle", Width = 120, Height = 50, Color = "#1759B7" }, + new NodeInfo() { Id = "5", Description = "Sign in", LineText = new List { "Existing" }, ParentId = new List { "3" }, Shape = "Rectangle", Width = 120, Height = 50, Color = "#1759B7" }, + new NodeInfo() { Id = "6", Description = "Enter username \nand password", LineText = new List { "", "No" }, ParentId = new List { "5", "7" }, Shape = "Data", Width = 150, Height = 50, Color = "#70AF16" }, + new NodeInfo() { Id = "7", Description = "Authorized?", ParentId = new List { "6" }, Shape = "Decision", Width = 120, Height = 70, Color = "#2F95D8" }, + new NodeInfo() { Id = "8", Description = "Login successful!!", LineText = new List { "Yes" }, ParentId = new List { "7" }, Shape = "Rectangle", Width = 120, Height = 50, Color = "#1759B7" }, + new NodeInfo() { Id = "9", Description = "Enter first name \nand last name", ParentId = new List { "4" }, Shape = "Data", Width = 150, Height = 50, Color = "#70AF16" }, + new NodeInfo() { Id = "10", Description = "Enter username \nand password", LineText = new List { "", "Yes" }, ParentId = new List { "9", "11" }, Shape = "Data", Width = 150, Height = 50, Color = "#70AF16" }, + new NodeInfo() { Id = "11", Description = "Username \nalready\n exists?", ParentId = new List { "10" }, Shape = "Decision", Width = 130, Height = 80, Color = "#2F95D8" }, + new NodeInfo() { Id = "12", Description = "Registration Successful!!", LineText = new List { "No" }, ParentId = new List { "11" }, Shape = "Process", Width = 120, Height = 50, Color = "#1759B7" }, + new NodeInfo() { Id = "13", Description = "Open inbox", ParentId = new List { "8", "12" }, Shape = "Process", Width = 120, Height = 50, Color = "#1759B7" }, + new NodeInfo() { Id = "14", Description = "End", ParentId = new List { "13" }, Shape = "StartOrEnd", Width = 100, Height = 30, Color = "#8E44CC" }, + }; + public class NodeInfo + { + public string Id { get; set; } + public string Description { get; set; } + public List ParentId { get; set; } + public List LineText { get; set; } + public string Shape { get; set; } + public double Width { get; set; } + public double Height { get; set; } + public string Color { get; set; } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutSettings.razor b/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutSettings.razor new file mode 100644 index 0000000..142a1bf --- /dev/null +++ b/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutSettings.razor @@ -0,0 +1,357 @@ +@page "/FlowchartLayoutSettings" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.DropDowns +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Inputs + +
+
+
+ + + + + + + + + + + + + + +
+
+
+
+ Properties +
+
+
+
+
+
Orientation
+
+
+ + + + +
+
+
+
+
Yes branch direction
+
+
+ + + + +
+
+
+
+
No branch direction
+
+
+ + + + +
+
+
+
+
Horizontal spacing
+
+
+ + + +
+
+
+
+
Vertical spacing
+
+
+ + + +
+
+
+
+
+
+@code +{ + //Initialize flowchart layout settings. + FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings() + { + YesBranchDirection = BranchDirection.LeftInFlow, + NoBranchDirection = BranchDirection.RightInFlow + }; + ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Initialize diagram component. + public SfDiagramComponent Diagram; + public int? HValue { get; set; } = 60; + public int? VValue { get; set; } = 60; + public LayoutType Type = LayoutType.Flowchart; + public LayoutOrientation OrientationType = LayoutOrientation.TopToBottom; + public int HorizontalSpacing = 50; + public int VerticalSpacing = 50; + string orientation = "Vertical"; + SfDropDownList expandDropDown; + SfDropDownList expandDropDown1; + SfDropDownList expandDropDown2; + string yesBranchDirection = "left"; + string noBranchDirection = "right"; + + public class Orientationvalue + { + public string Text { get; set; } + public string Value { get; set; } + } + + private List Orientation = new List() + { + new Orientationvalue { Text ="Horizontal", Value= "Horizontal" }, + new Orientationvalue { Text = "Vertical", Value = "Vertical" }, + }; + + public class BranchDirectionvalue + { + public string Text { get; set; } + public string Value { get; set; } + } + + public class BranchDirectionvalue1 + { + public string Text { get; set; } + public string Value { get; set; } + } + + private List BranchDirection1 = new List() + { + new BranchDirectionvalue { Text ="same", Value= "Same as flow" }, + new BranchDirectionvalue { Text = "left", Value = "Left in flow" }, + new BranchDirectionvalue { Text = "right", Value = "Right in flow" }, + }; + private List BranchDirection2 = new List() + { + new BranchDirectionvalue1 { Text ="same", Value= "Same as flow" }, + new BranchDirectionvalue1 { Text = "left", Value = "Left in flow" }, + new BranchDirectionvalue1 { Text = "right", Value = "Right in flow" }, + }; + private void OnDataLoaded(object obj) + { + for (int i = 0; i < Diagram.Connectors.Count; i++) + { + var connector = Diagram.Connectors[i]; + var node = Diagram.GetObject(connector.TargetID) as Node; + var srcNode = Diagram.GetObject(connector.SourceID) as Node; + if (node.Data != null && node.Data is ItemInfo itemInfo) + { + if (itemInfo.Label != null && itemInfo.Label.Count > 0) + { + if (itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id) != -1) + { + var parentIndex = itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id); + if (itemInfo.Label.Count > parentIndex) + { + connector.Annotations = new DiagramObjectCollection() + { + new PathAnnotation() { Content = itemInfo.Label[parentIndex], Style = new TextStyle(){ Bold = true} } + }; + } + } + } + } + } + } + //Creates connectors with some default values. + private void OnConnectorCreating(IDiagramObject obj) + { + if (obj is Connector connector) + { + connector.Type = ConnectorSegmentType.Orthogonal; + connector.Style.Fill = "#6CA0DC"; + connector.Style.StrokeColor = "#6CA0DC"; + connector.Style.StrokeWidth = 2; + connector.TargetDecorator.Style.Fill = "#6CA0DC"; + connector.TargetDecorator.Style.StrokeColor = "#6CA0DC"; + } + } + //Creates nodes with some default values. + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data != null && node.Data is ItemInfo) + { + ItemInfo employeeDetails = node.Data as ItemInfo; + node.Width = employeeDetails._Width; + node.Height = employeeDetails._Height; + if (employeeDetails._Shape == "StartOrEnd") + { + node.Shape = new FlowShape() { Shape = NodeFlowShapes.Terminator }; + } + else + node.Shape = new FlowShape() { Shape = (NodeFlowShapes)Enum.Parse(typeof(NodeFlowShapes), employeeDetails._Shape.ToString()) }; + node.Style.Fill = employeeDetails._Color; + node.Style.StrokeColor = employeeDetails._Color; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation(){ Content = employeeDetails.Name, Style = new TextStyle(){ Color = "black", Bold = true} } + }; + } + } + //Initialize data source collection. + public List DataSource = new List(){ + new ItemInfo() + { + Id = "1", + Name = "Start", + _Shape = "StartOrEnd", + _Width = 80, + _Height = 35, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "2", + Name = "Input", + ParentId = new List { "1" }, + _Shape = "Data", + _Width = 90, + _Height = 35, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "3", + Name = "Decision?", + ParentId = new List { "2" }, + _Shape = "Decision", + _Width = 80, + _Height = 60, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "4", + Label = new List { "No" }, + Name = "Process1", + ParentId = new List { "3" }, + _Shape = "Process", + _Width = 80, + _Height = 40, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "5", + Label = new List { "Yes" }, + Name = "Process2", + ParentId = new List() { "3" }, + _Shape = "Process", + _Width = 80, + _Height = 40, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "6", + Name = "Output", + ParentId = new List { "5" }, + _Shape = "Data", + _Width = 90, + _Height = 35, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "7", + Name = "Output", + ParentId = new List { "4" }, + _Shape = "Data", + _Width = 90, + _Height = 35, + _Color = "#6CA0DC" + }, + new ItemInfo() + { + Id = "8", + Name = "End", + ParentId = new List { "6","7" }, + _Shape = "Terminator", + _Width = 80, + _Height = 35, + _Color = "#6CA0DC" + }, + }; + public class ItemInfo + { + public string Name { get; set; } + public string Id { get; set; } + public List Label { get; set; } + public List ParentId { get; set; } + public string _Shape { get; set; } + public double _Width { get; set; } + public double _Height { get; set; } + public string _Color { get; set; } + + } + + public void OrientationTypeChange(ChangeEventArgs args) + { + OrientationType = args.ItemData.Value == "Vertical" ? LayoutOrientation.TopToBottom : LayoutOrientation.LeftToRight; + } + + public void YesBranchDirectionChange(ChangeEventArgs args) + { + if (args.ItemData.Text == "same") + { + flowchartSettings.YesBranchDirection = BranchDirection.SameAsFlow; + } + if (args.ItemData.Text == "left") + { + flowchartSettings.YesBranchDirection = BranchDirection.LeftInFlow; + } + if (args.ItemData.Text == "right") + { + flowchartSettings.YesBranchDirection = BranchDirection.RightInFlow; + } + } + public void NoBranchDirectionChange(ChangeEventArgs args) + { + if (args.ItemData.Text == "same") + { + flowchartSettings.NoBranchDirection = BranchDirection.SameAsFlow; + } + if (args.ItemData.Text == "left") + { + flowchartSettings.NoBranchDirection = BranchDirection.LeftInFlow; + } + if (args.ItemData.Text == "right") + { + flowchartSettings.NoBranchDirection = BranchDirection.RightInFlow; + } + } + private void OnHorizontalSpacingChange(Syncfusion.Blazor.Inputs.ChangeEventArgs args) + { + int val = Convert.ToInt32(args.Value); + HorizontalSpacing = val; + } + private void OnVerticalSpacingChange(Syncfusion.Blazor.Inputs.ChangeEventArgs args) + { + int val = Convert.ToInt32(args.Value); + VerticalSpacing = val; + } + +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/HeirarchicalLayout.razor b/Diagram/Server/Pages/Layout/HeirarchicalLayout.razor new file mode 100644 index 0000000..c829082 --- /dev/null +++ b/Diagram/Server/Pages/Layout/HeirarchicalLayout.razor @@ -0,0 +1,63 @@ +@page "/HeirarchicalLayout" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + + + + +@code +{ + int left = 40; + int top = 50; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + int HorizontalSpacing = 40; + int VerticalSpacing = 40; + + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 40; + node.Width = 100; + //Initializing the default node's shape style. + node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }; + node.Annotations[0].Style = new TextStyle() { Color = "white", Bold = true }; + } + + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + } + + protected override void OnInitialized() + { + //Initializing node and connectors. + nodes = new DiagramObjectCollection() + { + new Node() { ID="node1", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Steve-Ceo"} } }, + new Node() { ID="node2", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Kevin-Manager"} } }, + new Node() { ID="node3", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Peter-Manager"} } }, + new Node() { ID="node4", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Jim-CSE"} } }, + new Node() { ID="node5", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Martin-CSE"} } }, + new Node() { ID="node6", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="John-Manager"} } }, + new Node() { ID="node7", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Mary-CSE"} } }, + }; + connectors = new DiagramObjectCollection() + { + new Connector() { ID="connector1", SourceID="node1", TargetID="node2" }, + new Connector() { ID="connector2", SourceID="node1", TargetID="node3" }, + new Connector() { ID="connector3", SourceID="node2", TargetID="node4" }, + new Connector() { ID="connector4", SourceID="node2", TargetID="node5" }, + new Connector() { ID="connector5", SourceID="node3", TargetID="node6" }, + new Connector() { ID="connector6", SourceID="node3", TargetID="node7" }, + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/HierarchicalTreeWithDataSource.razor b/Diagram/Server/Pages/Layout/HierarchicalTreeWithDataSource.razor new file mode 100644 index 0000000..c1fd665 --- /dev/null +++ b/Diagram/Server/Pages/Layout/HierarchicalTreeWithDataSource.razor @@ -0,0 +1,70 @@ +@page "/HierarchicalTreeWithDataSource" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + + + + + +@code +{ + int left = 40; + int top = 50; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + int HorizontalSpacing = 40; + int VerticalSpacing = 40; + + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 40; + node.Width = 100; + //Initializing the default node's shape style. + node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }; + } + + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + } + + public class HierarchicalDetails + { + public string Id { get; set; } + public string Role { get; set; } + public string Manager { get; set; } + public string ChartType { get; set; } + public string Color { get; set; } + } + public List DataSource = new List() + { + new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" } + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/LineDistribution.razor b/Diagram/Server/Pages/Layout/LineDistribution.razor new file mode 100644 index 0000000..1359635 --- /dev/null +++ b/Diagram/Server/Pages/Layout/LineDistribution.razor @@ -0,0 +1,61 @@ +@page "/LineDistribution" + +@using Syncfusion.Blazor.Diagram + + + + + + + +@code +{ + //Initializing layout. + int HorizontalSpacing = 40; + int VerticalSpacing = 50; + + //Creates node with some default values. + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 40; + node.Width = 40; + node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeWidth = 2, StrokeColor = "none" }; + } + + //Creates connectors with some default values. + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).CornerRadius = 7; + (connector as Connector).Style.StrokeWidth = 1; + (connector as Connector).TargetDecorator.Height = 7; + (connector as Connector).TargetDecorator.Width = 7; + (connector as Connector).Style.Fill = "#6495ED"; + (connector as Connector).Style.StrokeColor = "#6495ED"; + (connector as Connector).TargetDecorator.Style.Fill = "#6BA5D7"; + (connector as Connector).TargetDecorator.Style.StrokeColor = "#6BA5D7"; + } + + public class ComplexHierarchical + { + public string Id { get; set; } + public List ReportingPerson { get; set; } + } + public object DataSource = new List() + { + new ComplexHierarchical() { Id= "node11" }, + new ComplexHierarchical() { Id= "node12", ReportingPerson= new List(){"node114" }}, + new ComplexHierarchical() { Id= "node13", ReportingPerson=new List() {"node12" }}, + new ComplexHierarchical() { Id= "node14", ReportingPerson=new List() {"node12"}}, + new ComplexHierarchical() { Id= "node15", ReportingPerson=new List() {"node12" }}, + new ComplexHierarchical() { Id= "node116", ReportingPerson=new List() {"node22","node12" }}, + new ComplexHierarchical() { Id= "node21"}, + new ComplexHierarchical() { Id= "node22", ReportingPerson=new List() {"node114" }}, + new ComplexHierarchical() { Id= "node23", ReportingPerson=new List() {"node22" }}, + new ComplexHierarchical() { Id= "node24", ReportingPerson=new List() {"node22"}}, + new ComplexHierarchical() { Id= "node25", ReportingPerson=new List() {"node22"} }, + new ComplexHierarchical() { Id= "node31"}, + new ComplexHierarchical() { Id= "node114", ReportingPerson=new List() {"node11","node21","node31" }} + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/LinearArrangementLinear.razor b/Diagram/Server/Pages/Layout/LinearArrangementLinear.razor new file mode 100644 index 0000000..6d3cb1d --- /dev/null +++ b/Diagram/Server/Pages/Layout/LinearArrangementLinear.razor @@ -0,0 +1,61 @@ +@page "/LinearArrangementLinear" + +@using Syncfusion.Blazor.Diagram + + + + + + + +@code +{ + //Initializing layout. + int HorizontalSpacing = 40; + int VerticalSpacing = 50; + + //Creates node with some default values. + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 40; + node.Width = 40; + node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeWidth = 2, StrokeColor = "none" }; + } + + //Creates connectors with some default values. + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).CornerRadius = 7; + (connector as Connector).Style.StrokeWidth = 1; + (connector as Connector).TargetDecorator.Height = 7; + (connector as Connector).TargetDecorator.Width = 7; + (connector as Connector).Style.Fill = "#6495ED"; + (connector as Connector).Style.StrokeColor = "#6495ED"; + (connector as Connector).TargetDecorator.Style.Fill = "#6BA5D7"; + (connector as Connector).TargetDecorator.Style.StrokeColor = "#6BA5D7"; + } + + public class ComplexHierarchical + { + public string Id { get; set; } + public List ReportingPerson { get; set; } + } + public object DataSource = new List() + { + new ComplexHierarchical() { Id= "node11" }, + new ComplexHierarchical() { Id= "node12", ReportingPerson= new List(){"node114" }}, + new ComplexHierarchical() { Id= "node13", ReportingPerson=new List() {"node12" }}, + new ComplexHierarchical() { Id= "node14", ReportingPerson=new List() {"node12"}}, + new ComplexHierarchical() { Id= "node15", ReportingPerson=new List() {"node12" }}, + new ComplexHierarchical() { Id= "node116", ReportingPerson=new List() {"node22","node12" }}, + new ComplexHierarchical() { Id= "node21"}, + new ComplexHierarchical() { Id= "node22", ReportingPerson=new List() {"node114" }}, + new ComplexHierarchical() { Id= "node23", ReportingPerson=new List() {"node22" }}, + new ComplexHierarchical() { Id= "node24", ReportingPerson=new List() {"node22"}}, + new ComplexHierarchical() { Id= "node25", ReportingPerson=new List() {"node22"} }, + new ComplexHierarchical() { Id= "node31"}, + new ComplexHierarchical() { Id= "node114", ReportingPerson=new List() {"node11","node21","node31" }} + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/LinearArrangementNonLinear.razor b/Diagram/Server/Pages/Layout/LinearArrangementNonLinear.razor new file mode 100644 index 0000000..3faa1f4 --- /dev/null +++ b/Diagram/Server/Pages/Layout/LinearArrangementNonLinear.razor @@ -0,0 +1,61 @@ +@page "/LinearArrangementNonLinear" + +@using Syncfusion.Blazor.Diagram + + + + + + + +@code +{ + //Initializing layout. + int HorizontalSpacing = 40; + int VerticalSpacing = 50; + + //Creates node with some default values. + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 40; + node.Width = 40; + node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeWidth = 2, StrokeColor = "none" }; + } + + //Creates connectors with some default values. + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).CornerRadius = 7; + (connector as Connector).Style.StrokeWidth = 1; + (connector as Connector).TargetDecorator.Height = 7; + (connector as Connector).TargetDecorator.Width = 7; + (connector as Connector).Style.Fill = "#6495ED"; + (connector as Connector).Style.StrokeColor = "#6495ED"; + (connector as Connector).TargetDecorator.Style.Fill = "#6BA5D7"; + (connector as Connector).TargetDecorator.Style.StrokeColor = "#6BA5D7"; + } + + public class ComplexHierarchical + { + public string Id { get; set; } + public List ReportingPerson { get; set; } + } + public object DataSource = new List() + { + new ComplexHierarchical() { Id= "node11" }, + new ComplexHierarchical() { Id= "node12", ReportingPerson= new List(){"node114" }}, + new ComplexHierarchical() { Id= "node13", ReportingPerson=new List() {"node12" }}, + new ComplexHierarchical() { Id= "node14", ReportingPerson=new List() {"node12"}}, + new ComplexHierarchical() { Id= "node15", ReportingPerson=new List() {"node12" }}, + new ComplexHierarchical() { Id= "node116", ReportingPerson=new List() {"node22","node12" }}, + new ComplexHierarchical() { Id= "node21"}, + new ComplexHierarchical() { Id= "node22", ReportingPerson=new List() {"node114" }}, + new ComplexHierarchical() { Id= "node23", ReportingPerson=new List() {"node22" }}, + new ComplexHierarchical() { Id= "node24", ReportingPerson=new List() {"node22"}}, + new ComplexHierarchical() { Id= "node25", ReportingPerson=new List() {"node22"}}, + new ComplexHierarchical() { Id= "node31"}, + new ComplexHierarchical() { Id= "node114", ReportingPerson=new List() {"node11","node21","node31" }} + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/MindMapWithoutDataSource.razor b/Diagram/Server/Pages/Layout/MindMapWithoutDataSource.razor new file mode 100644 index 0000000..8d6c599 --- /dev/null +++ b/Diagram/Server/Pages/Layout/MindMapWithoutDataSource.razor @@ -0,0 +1,234 @@ +@page "/MindMapWithoutDataSource" + +@using Syncfusion.Blazor.Diagram + + + + + + + +@code +{ + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + string root = "node4"; + //Creates connectors with some default values. + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 50; + node.Width = 100; + node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "white" }; + node.Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }; + } + + //Creates node with some default values. + private void OnConnectorCreating(IDiagramObject connector) + { + Connector connectors = connector as Connector; + connectors.Type = ConnectorSegmentType.Bezier; + connectors.Style = new TextStyle() { StrokeColor = "#6495ED", StrokeWidth = 2 }; + connectors.TargetDecorator = new DecoratorSettings + { + Shape = DecoratorShape.None, + }; + } + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 70, + Height = 70, + Ports = new DiagramObjectCollection() +{ + new PointPort() + { + ID="left", + Offset = new DiagramPoint() { X = 1, Y = 0.5}, + },new PointPort() + { + ID="right", + Offset = new DiagramPoint() { X = 0, Y = 0.5}, + } + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 70, + Ports = new DiagramObjectCollection() +{ + new PointPort() + { + ID="left", + Offset = new DiagramPoint() { X = 0, Y = 0.5}, + } + }, + Height = 70 + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Ports = new DiagramObjectCollection() +{ + new PointPort() + { + ID="right", + Offset = new DiagramPoint() { X = 1, Y = 0.5}, + } + }, + Height = 70 + }; + nodes.Add(node3); + Node node4 = new Node() + { + ID = "node4", + Width = 70, + Height = 70 + }; + nodes.Add(node4); + Node node5 = new Node() + { + ID = "node5", + Width = 70, + Height = 70 + }; + nodes.Add(node5); + Node node6 = new Node() + { + ID = "node6", + Width = 70, + Height = 70 + }; + nodes.Add(node6); + Node node7 = new Node() + { + ID = "node7", + Width = 70, + Height = 70 + }; + nodes.Add(node7); + Node node8 = new Node() + { + ID = "node8", + Width = 70, + Height = 70 + }; + nodes.Add(node8); + Node node9 = new Node() + { + ID = "node9", + Width = 70, + Height = 70 + }; + nodes.Add(node9); + Node node10 = new Node() + { + ID = "node10", + Width = 70, + Height = 70 + }; + nodes.Add(node10); + Node node11 = new Node() + { + ID = "node11", + Width = 70, + Height = 70, + }; + nodes.Add(node11); + Node node12 = new Node() + { + ID = "node12", + Width = 70, + Height = 70 + }; + nodes.Add(node12); + Node node13 = new Node() + { + ID = "node13", + Width = 70, + Height = 70 + }; + nodes.Add(node13); + Node node14 = new Node() + { + ID = "node14", + Width = 70, + Height = 70 + }; + Node node15 = new Node() + { + ID = "node15", + Width = 70, + Height = 70 + }; + Node node16 = new Node() + { + ID = "node16", + Width = 70, + Height = 70 + }; + nodes.Add(node14); + Node node17 = new Node() + { + ID = "node17", + Ports = new DiagramObjectCollection() +{ + new PointPort() + { + ID="right", + Offset = new DiagramPoint() { X = 1, Y = 0.5}, + } + }, + Width = 70, + Height = 70, + }; + nodes.Add(node15); + nodes.Add(node16); + nodes.Add(node17); + + Connector connector1 = new Connector() { ID = "connector1", SourceID = "node1", SourcePortID = "left", TargetID = "node2", TargetPortID = "left", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector1); + + Connector connector2 = new Connector() { ID = "connector2", SourceID = "node1", SourcePortID = "right", TargetID = "node3", TargetPortID = "right", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector2); + + Connector connector3 = new Connector() { ID = "connector3", SourceID = "node2", TargetID = "node4", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector3); + Connector connector4 = new Connector() { ID = "connector4", SourceID = "node2", TargetID = "node5", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector4); + Connector connector5 = new Connector() { ID = "connector5", SourceID = "node3", TargetID = "node6", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector5); + Connector connector6 = new Connector() { ID = "connector6", SourceID = "node3", TargetID = "node7", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector6); + Connector connector7 = new Connector() { ID = "connector7", SourceID = "node4", TargetID = "node8", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector7); + Connector connector8 = new Connector() { ID = "connector8", SourceID = "node4", TargetID = "node9", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector8); + Connector connector9 = new Connector() { ID = "connector9", SourceID = "node5", TargetID = "node10", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector9); + Connector connector10 = new Connector() { ID = "connector10", SourceID = "node5", TargetID = "node11", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector10); + Connector connector11 = new Connector() { ID = "connector11", SourceID = "node6", TargetID = "node12", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector11); + Connector connector12 = new Connector() { ID = "connector12", SourceID = "node6", TargetID = "node13", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector12); + Connector connector13 = new Connector() { ID = "connector13", SourceID = "node7", TargetID = "node14", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector13); + Connector connector14 = new Connector() { ID = "connector14", SourceID = "node7", TargetID = "node15", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector14); + Connector connector15 = new Connector() { ID = "connector15", SourceID = "node8", TargetID = "node16", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector15); + Connector connector16 = new Connector() { ID = "connector16", SourceID = "node8", TargetID = "node17", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector16); + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/MindmapOrientation.razor b/Diagram/Server/Pages/Layout/MindmapOrientation.razor new file mode 100644 index 0000000..a49eca4 --- /dev/null +++ b/Diagram/Server/Pages/Layout/MindmapOrientation.razor @@ -0,0 +1,111 @@ +@page "/MindmapOrientation" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + + + + + +@code { + private SfDiagramComponent? diagram; + public LayoutOrientation SelectedOrientation { get; set; } = LayoutOrientation.Vertical; + public List LayoutOrientationOptions { get; set; } = new() + { + new OrientationItem { Text = "Vertical", Value = LayoutOrientation.Vertical }, + new OrientationItem { Text = "Horizontal", Value = LayoutOrientation.Horizontal }, + new OrientationItem { Text = "Left to Right", Value = LayoutOrientation.LeftToRight }, + new OrientationItem { Text = "Right to Left", Value = LayoutOrientation.RightToLeft } + }; + + public List DataSource { get; set; } = new() + { + new MindMapDetails { Id = "1", Label = "Project Planning", ParentId = "", Branch = "Root" }, + new MindMapDetails { Id = "2", Label = "Requirements", ParentId = "1", Branch = "Right" }, + new MindMapDetails { Id = "3", Label = "Design", ParentId = "1", Branch = "Right" }, + new MindMapDetails { Id = "5", Label = "Stakeholder Analysis", ParentId = "2", Branch = "SubRight" }, + new MindMapDetails { Id = "6", Label = "Documentation", ParentId = "2", Branch = "SubRight" }, + new MindMapDetails { Id = "7", Label = "UI Design", ParentId = "3", Branch = "SubRight" }, + new MindMapDetails { Id = "8", Label = "Database Design", ParentId = "3", Branch = "SubRight" } + }; + + private BranchType GetBranch(IDiagramObject obj) + { + if (obj is not Node node) + return BranchType.Left; + if (node.Data is not MindMapDetails mindMapData || string.IsNullOrWhiteSpace(mindMapData.Branch)) + return BranchType.Left; + return Enum.TryParse(mindMapData.Branch, out BranchType branchType) + ? branchType + : BranchType.SubLeft; + } + + // Method triggered by button click at runtime to set diagram orientation to vertical. + private void ChangeLayoutOrientation() + { + diagram.Layout.Orientation = LayoutOrientation.Vertical; + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is not Node node) + return; + // Apply default node styling. + node.Height = 100; + node.Width = 100; + node.BackgroundColor = "#6BA5D7"; + node.Style = new ShapeStyle + { + Fill = "#6495ED", + StrokeWidth = 1, + StrokeColor = "white" + }; + node.Shape = new BasicShape { Type = NodeShapes.Basic }; + // Add annotation with label from data. + if (node.Data is MindMapDetails mindMapData && !string.IsNullOrWhiteSpace(mindMapData.Label)) + { + node.Annotations = new DiagramObjectCollection + { + new ShapeAnnotation { Content = mindMapData.Label } + }; + } + } + + private void OnConnectorCreating(IDiagramObject obj) + { + if (obj is not Connector connector) + return; + connector.Type = ConnectorSegmentType.Bezier; + connector.Style = new ShapeStyle + { + StrokeColor = "#6495ED", + StrokeWidth = 2 + }; + connector.TargetDecorator = new DecoratorSettings + { + Shape = DecoratorShape.None + }; + } + + public class OrientationItem + { + public string Text { get; set; } = string.Empty; + public LayoutOrientation Value { get; set; } + } + + public class MindMapDetails + { + public string Id { get; set; } = string.Empty; + public string Label { get; set; } = string.Empty; + public string ParentId { get; set; } = string.Empty; + public string Branch { get; set; } = string.Empty; + public string Fill { get; set; } = string.Empty; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/MindmapOrientationRuntime.razor b/Diagram/Server/Pages/Layout/MindmapOrientationRuntime.razor new file mode 100644 index 0000000..3779061 --- /dev/null +++ b/Diagram/Server/Pages/Layout/MindmapOrientationRuntime.razor @@ -0,0 +1,125 @@ +@page "/MindmapOrientationRuntime" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.DropDowns + +
+ + + + + + + + + + + +
+ + + + + +
+
+ +@code { + private SfDiagramComponent? diagram; + + // Property bound to dropdown and diagram layout, updated at runtime by user interaction. + public LayoutOrientation SelectedOrientation { get; set; } = LayoutOrientation.Vertical; + + public List LayoutOrientationOptions { get; set; } = new() + { + new OrientationItem { Text = "Vertical", Value = LayoutOrientation.Vertical }, + new OrientationItem { Text = "Horizontal", Value = LayoutOrientation.Horizontal }, + new OrientationItem { Text = "Left to Right", Value = LayoutOrientation.LeftToRight }, + new OrientationItem { Text = "Right to Left", Value = LayoutOrientation.RightToLeft } + }; + + public List DataSource { get; set; } = new() + { + new MindMapDetails { Id = "1", Label = "Project Planning", ParentId = "", Branch = "Root" }, + new MindMapDetails { Id = "2", Label = "Requirements", ParentId = "1", Branch = "Right" }, + new MindMapDetails { Id = "3", Label = "Design", ParentId = "1", Branch = "Right" }, + new MindMapDetails { Id = "5", Label = "Stakeholder Analysis", ParentId = "2", Branch = "SubRight" }, + new MindMapDetails { Id = "6", Label = "Documentation", ParentId = "2", Branch = "SubRight" }, + new MindMapDetails { Id = "7", Label = "UI Design", ParentId = "3", Branch = "SubRight" }, + new MindMapDetails { Id = "8", Label = "Database Design", ParentId = "3", Branch = "SubRight" } + }; + + private BranchType GetBranch(IDiagramObject obj) + { + if (obj is not Node node) + return BranchType.Left; + if (node.Data is not MindMapDetails mindMapData || string.IsNullOrWhiteSpace(mindMapData.Branch)) + return BranchType.Left; + return Enum.TryParse(mindMapData.Branch, out BranchType branchType) + ? branchType + : BranchType.SubLeft; + } + + // Method triggered by button click at runtime to set diagram orientation to vertical. + private void ChangeLayoutOrientation() + { + diagram.Layout.Orientation = LayoutOrientation.Vertical; + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is not Node node) + return; + // Apply default node styling. + node.Height = 100; + node.Width = 100; + node.BackgroundColor = "#6BA5D7"; + node.Style = new ShapeStyle + { + Fill = "#6495ED", + StrokeWidth = 1, + StrokeColor = "white" + }; + node.Shape = new BasicShape { Type = NodeShapes.Basic }; + // Add annotation with label from data. + if (node.Data is MindMapDetails mindMapData && !string.IsNullOrWhiteSpace(mindMapData.Label)) + { + node.Annotations = new DiagramObjectCollection + { + new ShapeAnnotation { Content = mindMapData.Label } + }; + } + } + + private void OnConnectorCreating(IDiagramObject obj) + { + if (obj is not Connector connector) + return; + connector.Type = ConnectorSegmentType.Bezier; + connector.Style = new ShapeStyle + { + StrokeColor = "#6495ED", + StrokeWidth = 2 + }; + connector.TargetDecorator = new DecoratorSettings + { + Shape = DecoratorShape.None + }; + } + + public class OrientationItem + { + public string Text { get; set; } = string.Empty; + public LayoutOrientation Value { get; set; } + } + + public class MindMapDetails + { + public string Id { get; set; } = string.Empty; + public string Label { get; set; } = string.Empty; + public string ParentId { get; set; } = string.Empty; + public string Branch { get; set; } = string.Empty; + public string Fill { get; set; } = string.Empty; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/MindmapSample1.razor b/Diagram/Server/Pages/Layout/MindmapSample1.razor new file mode 100644 index 0000000..a3ecfce --- /dev/null +++ b/Diagram/Server/Pages/Layout/MindmapSample1.razor @@ -0,0 +1,60 @@ +@page "/MindmapSample1" + +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + //Creates nodes with some default values + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 25; + node.Width = 25; + node.BackgroundColor = "#6BA5D7"; + node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "white" }; + node.Shape = new BasicShape() { Type = NodeShapes.Basic }; ; + } + + //Creates connectors with some default values + private void OnConnectorCreating(IDiagramObject connector) + { + Connector connectors = connector as Connector; + connectors.Type = ConnectorSegmentType.Bezier; + connectors.Style = new ShapeStyle() { StrokeColor = "#6495ED", StrokeWidth = 2 }; + connectors.TargetDecorator = new DecoratorSettings + { + Shape = DecoratorShape.None, + }; + } + + public class MindMapDetails + { + public string Id { get; set; } + public string Label { get; set; } + public string ParentId { get; set; } + public string Branch { get; set; } + public string Fill { get; set; } + } + + public object DataSource = new List() + { + new MindMapDetails() { Id= "1",Label="Creativity", ParentId ="", Branch = "Root"}, + new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1", Branch = "Right" }, + new MindMapDetails() { Id= "3", Label="Complementing", ParentId ="1", Branch = "Left" }, + new MindMapDetails() { Id= "4", Label="Sessions", ParentId ="2", Branch = "subRight" }, + new MindMapDetails() { Id= "5", Label="Complementing", ParentId ="2", Branch = "subRight" }, + new MindMapDetails() { Id= "6", Label= "Local", ParentId ="3", Branch = "subRight" }, + new MindMapDetails() { Id= "7", Label= "Remote", ParentId ="3", Branch = "subRight" }, + new MindMapDetails() { Id= "8", Label= "Individual", ParentId ="3", Branch = "subRight" }, + new MindMapDetails() { Id= "9", Label= "Teams", ParentId ="3", Branch = "subRight" }, + new MindMapDetails() { Id= "10", Label= "Ideas", ParentId ="5", Branch = "subRight" }, + new MindMapDetails() { Id= "11", Label= "Engagement", ParentId ="5", Branch = "subRight" }, + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/MindmapSample2.razor b/Diagram/Server/Pages/Layout/MindmapSample2.razor new file mode 100644 index 0000000..911e2eb --- /dev/null +++ b/Diagram/Server/Pages/Layout/MindmapSample2.razor @@ -0,0 +1,77 @@ +@page "/MindmapSample2" + +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + //Set all branches on the right side for mind map layout + private BranchType GetBranch(IDiagramObject obj) + { + if ((obj as Node).ID == "1") + { + return BranchType.Root; + } + return BranchType.Right; + } + + //Creates connectors with some default values + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 50; + node.Width = 100; + node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "white" }; + node.Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }; + MindMapDetails mindmapData = node.Data as MindMapDetails; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = mindmapData.Label + } + }; + } + + //Creates node with some default values + private void OnConnectorCreating(IDiagramObject connector) + { + Connector connectors = connector as Connector; + connectors.Type = ConnectorSegmentType.Bezier; + connectors.Style = new TextStyle() { StrokeColor = "#6495ED", StrokeWidth = 2 }; + connectors.TargetDecorator = new DecoratorSettings + { + Shape = DecoratorShape.None, + }; + } + + public class MindMapDetails + { + public string Id { get; set; } + public string Label { get; set; } + public string ParentId { get; set; } + public string Branch { get; set; } + public string Fill { get; set; } + } + + public object DataSource = new List() + { + new MindMapDetails() { Id= "1",Label="Creativity", ParentId =""}, + new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1"}, + new MindMapDetails() { Id= "3", Label="Complementing", ParentId ="1"}, + new MindMapDetails() { Id= "4", Label="Sessions", ParentId ="2"}, + new MindMapDetails() { Id= "5", Label="Complementing", ParentId ="2"}, + new MindMapDetails() { Id= "6", Label= "Local", ParentId ="3"}, + new MindMapDetails() { Id= "7", Label= "Remote", ParentId ="3"}, + new MindMapDetails() { Id= "8", Label= "Individual", ParentId ="3"}, + new MindMapDetails() { Id= "9", Label= "Teams", ParentId ="3"}, + new MindMapDetails() { Id= "10", Label= "Ideas", ParentId ="5"}, + new MindMapDetails() { Id= "11", Label= "Engagement", ParentId ="5"}, + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/OrganizationLayout1.razor b/Diagram/Server/Pages/Layout/OrganizationLayout1.razor new file mode 100644 index 0000000..ed40160 --- /dev/null +++ b/Diagram/Server/Pages/Layout/OrganizationLayout1.razor @@ -0,0 +1,83 @@ +@page "/OrganizationLayout1" + +@using Syncfusion.Blazor.Diagram + + + + + + +@code { + + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Defines diagram's node collection + DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + + int HorizontalSpacing = 40; + int VerticalSpacing = 40; + + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 40; + node.Width = 100; + //Initializing the default node's shape style + node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }; + node.Annotations[0].Style = new TextStyle() { Color = "white", Bold = true }; + } + + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + } + + protected override void OnInitialized() + { + NodeCollection = new DiagramObjectCollection() + { + new Node() { ID = "node1",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Project Management" } }}, + new Node() { ID = "node2",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "R&D Team" } }}, + new Node() { ID = "node3",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Philosophy" } }}, + new Node() { ID = "node4",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Organization" } }}, + new Node() { ID = "node5",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Technology" } }}, + new Node() { ID = "node6",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Funding" } }}, + new Node() { ID = "node7",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Resource-Allocation" } }}, + new Node() { ID = "node8",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Targeting" } }}, + new Node() { ID = "node9",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Evaluation" } }}, + new Node() { ID = "node10",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "HR-Team" } }}, + new Node() { ID = "node11",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Recruiment" } }}, + new Node() { ID = "node12",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Employee-Relation" } }}, + new Node() { ID = "node13",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Production & Sales Team" } }}, + new Node() { ID = "node14",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Design" } }}, + new Node() { ID = "node15",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Operation" } }}, + new Node() { ID = "node16",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Support" } }}, + new Node() { ID = "node17",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Quality Assurance" } }}, + new Node() { ID = "node18",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Customer Interaction" } }}, + new Node() { ID = "node19",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Support and Maintenance" } }}, + new Node() { ID = "node20",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Task Coordination" } }}, + }; + connectors = new DiagramObjectCollection() + { + new Connector() { ID = "connector1",SourceID = "node1",TargetID = "node2"}, + new Connector() { ID = "connector2",SourceID = "node1",TargetID = "node10"}, + new Connector() { ID = "connector3",SourceID = "node1",TargetID = "node13"}, + new Connector() { ID = "connector4",SourceID = "node2",TargetID = "node3"}, + new Connector() { ID = "connector5",SourceID = "node2",TargetID = "node4"}, + new Connector() { ID = "connector6",SourceID = "node2",TargetID = "node5"}, + new Connector() { ID = "connector7",SourceID = "node2",TargetID = "node6"}, + new Connector() { ID = "connector8",SourceID = "node2",TargetID = "node7"}, + new Connector() { ID = "connector9",SourceID = "node2",TargetID = "node8"}, + new Connector() { ID = "connector10",SourceID = "node2",TargetID = "node9"}, + new Connector() { ID = "connector11",SourceID = "node2",TargetID = "node11"}, + new Connector() { ID = "connector12",SourceID = "node10",TargetID = "node12"}, + new Connector() { ID = "connector13",SourceID = "node10",TargetID = "node14"}, + new Connector() { ID = "connector14",SourceID = "node13",TargetID = "node15"}, + new Connector() { ID = "connector15",SourceID = "node13",TargetID = "node16"}, + new Connector() { ID = "connector16",SourceID = "node13",TargetID = "node17"}, + new Connector() { ID = "connector17",SourceID = "node13",TargetID = "node18"}, + new Connector() { ID = "connector18",SourceID = "node13",TargetID = "node19"}, + new Connector() { ID = "connector19",SourceID = "node13",TargetID = "node20"}, + }; + } +} diff --git a/Diagram/Server/Pages/Layout/OrganizationLayout2.razor b/Diagram/Server/Pages/Layout/OrganizationLayout2.razor new file mode 100644 index 0000000..5882ae6 --- /dev/null +++ b/Diagram/Server/Pages/Layout/OrganizationLayout2.razor @@ -0,0 +1,68 @@ +@page "/OrganizationLayout2" + +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Diagram + + + + + + + + + + + + + +@code +{ + //Initializing layout. + int HorizontalSpacing = 40; + int VerticalSpacing = 50; + + //To configure every subtree of the organizational chart. + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) + { + options.AlignmentType = SubTreeAlignmentType.Right; + options.Orientation = Orientation.Vertical; + return options; + } + + //Creates node with some default values. + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 50; + node.Width = 150; + node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "Black" }; + } + + //Creates connectors with some default values. + private void OnConnectorCreating(IDiagramObject connector) + { + Connector connectors = connector as Connector; + connectors.Type = ConnectorSegmentType.Orthogonal; + connectors.Style = new TextStyle() { StrokeColor = "#6495ED", StrokeWidth = 1 }; + connectors.TargetDecorator = new DecoratorSettings + { + Shape = DecoratorShape.None, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED", } + }; + } + + public class OrgChartDataModel + { + public string Id { get; set; } + public string Team { get; set; } + public string Role { get; set; } + } + public object DataSource = new List() + { + new OrgChartDataModel() { Id= "1", Role= "General Manager" }, + new OrgChartDataModel() { Id= "2", Role= "Human Resource Manager", Team= "1" }, + new OrgChartDataModel() { Id= "3", Role= "Design Manager", Team= "1" }, + new OrgChartDataModel() { Id= "4", Role= "Operation Manager", Team= "1" }, + new OrgChartDataModel() { Id= "5", Role= "Marketing Manager", Team= "1" } + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/RadialTreeWithDataSource.razor b/Diagram/Server/Pages/Layout/RadialTreeWithDataSource.razor new file mode 100644 index 0000000..2d71022 --- /dev/null +++ b/Diagram/Server/Pages/Layout/RadialTreeWithDataSource.razor @@ -0,0 +1,141 @@ +@page "/RadialTreeWithDataSource" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.Internal +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Popups; + + +
+
+ + + + + + + +
+@code { + + SfDiagramComponent diagram; + + public class RadialTreeDetails + { + public string Id { get; set; } + public string Name { get; set; } + public string Designation { get; set; } + public string ReportingPerson { get; set; } + } + + private void OnFittoPage() + { + //Console.WriteLine("Created - "+DateTime.Now.ToString("yyyy-MM-dd HH: mm:ss.fff")); + FitOptions options = new FitOptions() { Mode = FitMode.Both, Region = DiagramRegion.Content }; + diagram.FitToPage(options); + } + + public List RadialSource = new List() + { + new RadialTreeDetails() { Id = "parent", Name = "Maria Anders", Designation = "Managing Director" }, + new RadialTreeDetails() { Id = "1", Name = "Ana Trujillo", Designation = "Project Manager", + ReportingPerson = "parent" }, + new RadialTreeDetails() { Id = "2", Name = "Lino Rodri", Designation = "Project Manager", + ReportingPerson = "parent" }, + new RadialTreeDetails() { Id = "3", Name = "Philip Cramer", Designation = "Project Manager", + ReportingPerson = "parent" }, + new RadialTreeDetails() { Id = "4", Name = "Pedro Afonso", Designation = "Project Manager", + ReportingPerson = "parent" }, + new RadialTreeDetails() { Id = "15", Name = "Paul Henriot", Designation = "Project Manager", + ReportingPerson = "parent" }, + new RadialTreeDetails() { Id = "18", Name = "Laura Callahan", Designation = "Project Manager", + ReportingPerson = "parent" }, + new RadialTreeDetails() { Id = "5", Name = "Anto Moreno", Designation = "Project Lead", + ReportingPerson = "1" }, + new RadialTreeDetails() { Id = "6", Name = "Elizabeth Roel", Designation = "Project Lead", + ReportingPerson = "1" }, + new RadialTreeDetails() { Id = "7", Name = "Aria Cruz", Designation = "Project Lead", + ReportingPerson = "18" }, + new RadialTreeDetails() { Id = "8", Name = "Eduardo Roel", Designation = "Project Lead", + ReportingPerson = "18" }, + new RadialTreeDetails() { Id = "9", Name = "Howard Snyd", Designation = "Project Lead", + ReportingPerson = "2" }, + new RadialTreeDetails() { Id = "10", Name = "Daniel Tonini", Designation = "Project Lead", + ReportingPerson = "2" }, + new RadialTreeDetails() { Id = "11", Name = "Nardo Batista", Designation = "Project Lead", + ReportingPerson = "3" }, + new RadialTreeDetails() { Id = "12", Name = "Michael Holz", Designation = "Project Lead", + ReportingPerson = "3" }, + new RadialTreeDetails() { Id = "13", Name = "Kloss Perrier", Designation = "Project Lead", + ReportingPerson = "4" }, + new RadialTreeDetails() { Id = "14", Name = "Liz Nixon", Designation = "Project Lead", + ReportingPerson = "4" }, + new RadialTreeDetails() { Id = "16", Name = "Paula Parente", Designation = "Project Lead", + ReportingPerson = "15" }, + new RadialTreeDetails() { Id = "17", Name = "Matti Kenna", Designation = "Project Lead", + ReportingPerson = "15" }, + + }; + + private void NodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + RadialTreeDetails radialData = node.Data as RadialTreeDetails; + double size = 0; + string color; + if (radialData.Id == "parent") + { + size = 20; + color="white"; + } + else + { + size = 10; + color = "black"; + } + ShapeAnnotation annotation = new ShapeAnnotation() { Content = radialData.Name, Style = new TextStyle() { Color = color, FontSize=size } }; + node.Annotations = new DiagramObjectCollection() { annotation }; + + if (radialData.Designation == "Managing Director") + { + node.Shape = new BasicShape() + { + Type = NodeShapes.Basic, + Shape = NodeBasicShapes.Ellipse, + CornerRadius = 10 + }; + node.Width = 150; + node.Height = 150; + node.Style.Fill = "black"; + } + else if (radialData.Designation == "Project Manager") + { + node.Width = 65; + node.Height = 65; + node.Style.Fill = "#f8ab52"; + } + else + { + node.Shape = new BasicShape() + { + Type = NodeShapes.Basic, + Shape = NodeBasicShapes.Ellipse, + CornerRadius = 10 + }; + node.Style.Fill = "#afeeee"; + node.Width = 50; + node.Height = 50; + } + } + private void ConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Straight; + } + +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Layout/RadialTreeWithNodes.razor b/Diagram/Server/Pages/Layout/RadialTreeWithNodes.razor new file mode 100644 index 0000000..2049368 --- /dev/null +++ b/Diagram/Server/Pages/Layout/RadialTreeWithNodes.razor @@ -0,0 +1,106 @@ +@page "/RadialTreeWithNodes" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.Internal +@using System.Collections.ObjectModel + +@using Microsoft.AspNetCore.Components +@using Node = Syncfusion.Blazor.Diagram.Node + + + + +
+
+ + + + +
+@code { + + SfDiagramComponent diagram; + string root = "node1"; + + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + for(int i = 1;i < 18;i++) + { + Node node1 = new Node() + { + ID = "node"+i, + Width = 70, + Height = 70, + }; + nodes.Add(node1); + } + Connector connector1 = new Connector() { ID = "connector1", SourceID = "node1", TargetID = "node2", }; + connectors.Add(connector1); + + Connector connector2 = new Connector() { ID = "connector2", SourceID = "node1", TargetID = "node3", }; + connectors.Add(connector2); + + Connector connector3 = new Connector() { ID = "connector3", SourceID = "node1", TargetID = "node4", }; + connectors.Add(connector3); + + Connector connector4 = new Connector() { ID = "connector4", SourceID = "node2", TargetID = "node5", }; + connectors.Add(connector4); + + Connector connector5 = new Connector() { ID = "connector5", SourceID = "node3", TargetID = "node6", }; + connectors.Add(connector5); + + Connector connector6 = new Connector() { ID = "connector6", SourceID = "node4", TargetID = "node7", }; + connectors.Add(connector6); + + Connector connector7 = new Connector() { ID = "connector7", SourceID = "node1", TargetID = "node8", }; + connectors.Add(connector7); + + Connector connector8 = new Connector() { ID = "connector8", SourceID = "node8", TargetID = "node9", }; + connectors.Add(connector8); + Connector connector9 = new Connector() { ID = "connector9", SourceID = "node2", TargetID = "node10", }; + connectors.Add(connector9); + Connector connector10 = new Connector() { ID = "connector10", SourceID = "node3", TargetID = "node11", }; + connectors.Add(connector10); + Connector connector11 = new Connector() { ID = "connector11", SourceID = "node4", TargetID = "node12", }; + connectors.Add(connector11); + Connector connector12 = new Connector() { ID = "connector12", SourceID = "node8", TargetID = "node13", }; + connectors.Add(connector12); + Connector connector13 = new Connector() { ID = "connector13", SourceID = "node2", TargetID = "node14", }; + connectors.Add(connector13); + Connector connector14 = new Connector() { ID = "connector14", SourceID = "node3", TargetID = "node15", }; + connectors.Add(connector14); + Connector connector15 = new Connector() { ID = "connector15", SourceID = "node4", TargetID = "node16", }; + connectors.Add(connector15); + Connector connector16 = new Connector() { ID = "connector16", SourceID = "node8", TargetID = "node17", }; + connectors.Add(connector16); + + } + + private void NodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Width = 60; + node.Height = 60; + ShapeAnnotation annotation = new ShapeAnnotation() { Content = node.ID, Style = new TextStyle() { Color = "black" } }; + node.Annotations = new DiagramObjectCollection() { annotation }; + + } + private void ConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Straight; + (connector as Connector).TargetDecorator=new DecoratorSettings + { + Shape = DecoratorShape.None, + }; + } + +} diff --git a/Diagram/Server/Pages/MermaidSupport/MermaidSupport.razor b/Diagram/Server/Pages/MermaidSupport/MermaidSupport.razor new file mode 100644 index 0000000..848adcb --- /dev/null +++ b/Diagram/Server/Pages/MermaidSupport/MermaidSupport.razor @@ -0,0 +1,279 @@ +@page "/MermaidSupport" + +@using Syncfusion.Blazor.Diagram + + + +
+ + +
+
+ + + + + +
+@code{ + public SfDiagramComponent diagram; + LayoutOrientation oreintation = LayoutOrientation.TopToBottom; + HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + int HorizontalSpacing = 30; + int VerticalSpacing = 30; + string data = string.Empty; + bool IsLoading = false; + public DiagramObjectCollection nodes = new DiagramObjectCollection(); + public DiagramObjectCollection connectors = new DiagramObjectCollection(); + + private void SaveAsMermaid() + { + data = diagram.SaveDiagramAsMermaid(); + } + + private async void LoadMermaid() + { + await diagram.LoadDiagramFromMermaidAsync(data); + } + + private BranchType GetBranch(IDiagramObject obj) + { + if((obj as Node).ID == "node3") + { + return BranchType.Root; + } + return BranchType.Right; + } + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 70, + Height = 70, + Ports = new DiagramObjectCollection() +{ + new PointPort() + { + ID="left", + Offset = new DiagramPoint() { X = 1, Y = 0.5}, + },new PointPort() + { + ID="right", + Offset = new DiagramPoint() { X = 0, Y = 0.5}, + } + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 70, + Ports = new DiagramObjectCollection() +{ + new PointPort() + { + ID="left", + Offset = new DiagramPoint() { X = 0, Y = 0.5}, + } + }, + Height = 70 + }; + nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + Width = 70, + Ports = new DiagramObjectCollection() +{ + new PointPort() + { + ID="right", + Offset = new DiagramPoint() { X = 1, Y = 0.5}, + } + }, + Height = 70 + }; + nodes.Add(node3); + Node node4 = new Node() + { + ID = "node4", + Width = 70, + Height = 70 + }; + nodes.Add(node4); + Node node5 = new Node() + { + ID = "node5", + Width = 70, + Height = 70 + }; + nodes.Add(node5); + Node node6 = new Node() + { + ID = "node6", + Width = 70, + Height = 70 + }; + nodes.Add(node6); + Node node7 = new Node() + { + ID = "node7", + Width = 70, + Height = 70 + }; + nodes.Add(node7); + Node node8 = new Node() + { + ID = "node8", + Width = 70, + Height = 70 + }; + nodes.Add(node8); + Node node9 = new Node() + { + ID = "node9", + Width = 70, + Height = 70 + }; + nodes.Add(node9); + Node node10 = new Node() + { + ID = "node10", + Width = 70, + Height = 70 + }; + nodes.Add(node10); + Node node11 = new Node() + { + ID = "node11", + Width = 70, + Height = 70, + }; + nodes.Add(node11); + Node node12 = new Node() + { + ID = "node12", + Width = 70, + Height = 70 + }; + nodes.Add(node12); + Node node13 = new Node() + { + ID = "node13", + Width = 70, + Height = 70 + }; + nodes.Add(node13); + Node node14 = new Node() + { + ID = "node14", + Width = 70, + Height = 70 + }; + Node node15 = new Node() + { + ID = "node15", + Width = 70, + Height = 70 + }; + Node node16 = new Node() + { + ID = "node16", + Width = 70, + Height = 70 + }; + nodes.Add(node14); + Node node17 = new Node() + { + ID = "node17", + Ports = new DiagramObjectCollection() +{ + new PointPort() + { + ID="right", + Offset = new DiagramPoint() { X = 1, Y = 0.5}, + } + }, + Width = 70, + Height = 70, + }; + nodes.Add(node15); + nodes.Add(node16); + nodes.Add(node17); + + Connector connector1 = new Connector() { ID = "connector1", SourceID = "node1", SourcePortID = "left", TargetID = "node2", TargetPortID = "left", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector1); + + Connector connector2 = new Connector() { ID = "connector2", SourceID = "node1", SourcePortID = "right", TargetID = "node3", TargetPortID = "right", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector2); + + Connector connector3 = new Connector() { ID = "connector3", SourceID = "node2", TargetID = "node4", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector3); + Connector connector4 = new Connector() { ID = "connector4", SourceID = "node2", TargetID = "node5", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector4); + Connector connector5 = new Connector() { ID = "connector5", SourceID = "node3", TargetID = "node6", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector5); + Connector connector6 = new Connector() { ID = "connector6", SourceID = "node3", TargetID = "node7", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector6); + Connector connector7 = new Connector() { ID = "connector7", SourceID = "node4", TargetID = "node8", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector7); + Connector connector8 = new Connector() { ID = "connector8", SourceID = "node4", TargetID = "node9", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector8); + Connector connector9 = new Connector() { ID = "connector9", SourceID = "node5", TargetID = "node10", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector9); + Connector connector10 = new Connector() { ID = "connector10", SourceID = "node5", TargetID = "node11", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector10); + Connector connector11 = new Connector() { ID = "connector11", SourceID = "node6", TargetID = "node12", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector11); + Connector connector12 = new Connector() { ID = "connector12", SourceID = "node6", TargetID = "node13", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector12); + Connector connector13 = new Connector() { ID = "connector13", SourceID = "node7", TargetID = "node14", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector13); + Connector connector14 = new Connector() { ID = "connector14", SourceID = "node7", TargetID = "node15", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector14); + Connector connector15 = new Connector() { ID = "connector15", SourceID = "node8", TargetID = "node16", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector15); + Connector connector16 = new Connector() { ID = "connector16", SourceID = "node8", TargetID = "node17", Type = ConnectorSegmentType.Straight }; + connectors.Add(connector16); + + } + private void NodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + + node.Height = 100; node.Width = 100; + node.Style.Fill = "#BB9AB1"; + + if (!IsLoading) + { + node.Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = node.ID + } + }; + } + } + private void ConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Bezier; + (connector as Connector).SourceDecorator.Shape = DecoratorShape.None; + (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; + } +} + diff --git a/Diagram/Server/Pages/Methods/AddDiagramElements.razor b/Diagram/Server/Pages/Methods/AddDiagramElements.razor new file mode 100644 index 0000000..c7e28ab --- /dev/null +++ b/Diagram/Server/Pages/Methods/AddDiagramElements.razor @@ -0,0 +1,95 @@ +@page "/AddDiagramElements" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + + public async void AddDiagramElementMethod() + { + Node node1 = new Node() + { + OffsetX = 100, + OffsetY = 100, + Height = 50, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 1, Y = 0.5}, + Height = 10, Width = 10, + Style = new ShapeStyle(){Fill = "yellow", StrokeColor = "yellow"} + } + }, + Width = 100, + ID = "node1", + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + + Node node2 = new Node() + { + OffsetX = 300, + OffsetY = 300, + Height = 50, + Width = 100, + ID = "node2", + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="port2", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 0, Y = 0.5}, + Height = 10, Width = 10, + Style = new ShapeStyle(){Fill = "yellow", StrokeColor = "yellow"} + } + }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + + Connector Connector = new Connector() + { + ID = "connector1", + //Source node id of the connector. + SourceID = "node1", + //source node port id. + SourcePortID = "port1", + //Target node id of the connector. + TargetID = "node2", + //Target node port id. + TargetPortID = "port2", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + // Type of the connector + Type = ConnectorSegmentType.Straight, + }; + DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + NodeCollection.Add(node1); + NodeCollection.Add(node2); + NodeCollection.Add(Connector); + await Diagram.AddDiagramElementsAsync(NodeCollection); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/AddMethod.razor b/Diagram/Server/Pages/Methods/AddMethod.razor new file mode 100644 index 0000000..0e9ca53 --- /dev/null +++ b/Diagram/Server/Pages/Methods/AddMethod.razor @@ -0,0 +1,33 @@ +@page "/AddMethod" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + // Add node. + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/BeginAndEndUpdate.razor b/Diagram/Server/Pages/Methods/BeginAndEndUpdate.razor new file mode 100644 index 0000000..c24ba64 --- /dev/null +++ b/Diagram/Server/Pages/Methods/BeginAndEndUpdate.razor @@ -0,0 +1,76 @@ +@page "/BeginAndEndUpdate" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + + + +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + public void PropertyUpdate() + { + diagram.BeginUpdate(); + diagram.Nodes[0].Height = 150; + diagram.Nodes[0].Width = 150; + _ = diagram.EndUpdateAsync(); + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/ChunkMessage.razor b/Diagram/Server/Pages/Methods/ChunkMessage.razor new file mode 100644 index 0000000..34e074d --- /dev/null +++ b/Diagram/Server/Pages/Methods/ChunkMessage.razor @@ -0,0 +1,38 @@ +@page "/ChunkMessage" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Initialize the Nodes Collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + int offsetX = 100; int offsetY = 100; double count = 1; + for(int i=1; i<=200; i++) + { + Node node = new Node() + { + ID = "node" + i, + OffsetX = count * offsetX, + OffsetY = offsetY, + Width = 100, + Height = 100, + Annotations = new DiagramObjectCollection() { + new ShapeAnnotation() { Content = "Annotation for the Node" + i.ToString() } + } + }; + count += 1.5; + if (i % 5 == 0) + { + count = 1; + offsetX = 100; + offsetY = offsetY + 200; + } + nodes.Add(node); + } + } +} diff --git a/Diagram/Server/Pages/Methods/Clear.razor b/Diagram/Server/Pages/Methods/Clear.razor new file mode 100644 index 0000000..b515d8e --- /dev/null +++ b/Diagram/Server/Pages/Methods/Clear.razor @@ -0,0 +1,63 @@ +@page "/Clear" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection Nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection Connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Nodes.Add(new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }); + Nodes.Add(new Node() + { + ID = "node2", + OffsetX = 270, + OffsetY = 70, + Width = 50, + Height = 50, + }); + Nodes.Add(new Node() + { + ID = "node3", + OffsetX = 330, + OffsetY = 130, + Width = 50, + Height = 50, + }); + Nodes.Add(new NodeGroup() + { + ID = "group", + Children = new string[] { "node2", "node3" }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }); + Connectors.Add(new Connector() + { + SourceID = "node1", + TargetID = "group", + Style = new ShapeStyle() { StrokeColor = "#6495ED" }, + TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } } + }); + } + private void Clear() + { + diagram.Clear(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/ClearSelection.razor b/Diagram/Server/Pages/Methods/ClearSelection.razor new file mode 100644 index 0000000..6181cbf --- /dev/null +++ b/Diagram/Server/Pages/Methods/ClearSelection.razor @@ -0,0 +1,86 @@ +@page "/ClearSelection" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +
+ + + + +
+ +
+ +
+ +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + //Method to clear the selected nodes/connectors. + public void ClearSelection() + { + diagram.ClearSelection(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/CloneMethod.razor b/Diagram/Server/Pages/Methods/CloneMethod.razor new file mode 100644 index 0000000..87d0b1a --- /dev/null +++ b/Diagram/Server/Pages/Methods/CloneMethod.razor @@ -0,0 +1,86 @@ +@page "/CloneMethod" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +
+ + + + +
+ +
+ +
+ +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + //Method to clone the diagram + public void CloneMethod() + { + diagram.Clone(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/Delete.razor b/Diagram/Server/Pages/Methods/Delete.razor new file mode 100644 index 0000000..0fd0db9 --- /dev/null +++ b/Diagram/Server/Pages/Methods/Delete.razor @@ -0,0 +1,99 @@ +@page "/Delete" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + +@code { + //Reference the diagram + SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection Nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection Connectors = new DiagramObjectCollection(); + //Initialize the diagram's nodebase collection + DiagramObjectCollection DiagramElements = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + OffsetX = 200, + OffsetY = 100, + Height = 50, + Width = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + Nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + OffsetX = 200, + OffsetY = 200, + Height = 50, + Width = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + Nodes.Add(node2); + Node node3 = new Node() + { + ID = "node3", + OffsetX = 200, + OffsetY = 300, + Height = 50, + Width = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + Nodes.Add(node3); + + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + Type = ConnectorSegmentType.Straight, + }; + Connectors.Add(connector1); + Connector connector2 = new Connector() + { + ID = "connector2", + SourceID = "node2", + TargetID = "node3", + Type = ConnectorSegmentType.Straight, + }; + Connectors.Add(connector2); + NodeGroup groupNode = new NodeGroup(); + groupNode.Children = new string[] { "node2", "node3" }; + Nodes.Add(groupNode); + } + //Deletes DiagramElements with null parameter + public void Delete() + { + diagram.Delete(); + } + //Deletes DiagramElements with parameter + private void DeletewithArgument() + { + DiagramElements.Add(diagram.Nodes[0]); + DiagramElements.Add(diagram.Nodes[1]); + diagram.Delete(DiagramElements); + } + +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/GetCustomCursor.razor b/Diagram/Server/Pages/Methods/GetCustomCursor.razor new file mode 100644 index 0000000..971aec6 --- /dev/null +++ b/Diagram/Server/Pages/Methods/GetCustomCursor.razor @@ -0,0 +1,86 @@ +@page "/GetCustomCursor" + +@using Syncfusion.Blazor.Diagram + + + +
+ + + +
+ + +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + //Method to getcustomcursor method + public string cursor(DiagramElementAction action, bool active, string handle) + { + string cursors = null; + if (action == DiagramElementAction.Select) + { + cursors = "crosshair"; + } + return cursors; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/GetCustomTool.razor b/Diagram/Server/Pages/Methods/GetCustomTool.razor new file mode 100644 index 0000000..5c02b19 --- /dev/null +++ b/Diagram/Server/Pages/Methods/GetCustomTool.razor @@ -0,0 +1,197 @@ +@page "/GetCustomTool" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + +@code +{ + //Reference the diagram + public SfDiagramComponent Diagram; + //Intialize diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + NodeGroup groupNode = new NodeGroup(); + //Intialize diagram's nodes collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Intialize diagram's selectionsettings + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + //Intialize diagram's userhandle + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + public string cursor(DiagramElementAction action, bool active, string handle) + { + string cursors = null; + if (handle == "changeCursor") + { + cursors = "crosshair"; + } + return cursors; + } + public InteractionControllerBase tools(DiagramElementAction action, string id) + { + InteractionControllerBase tool = null; + if (id == "clone") + { + tool = new CloneTool(Diagram); + } + else if (id == "nodeDelete") + { + tool = new AddDeleteTool(Diagram); + } + return tool; + } + public class AddDeleteTool : DragController + { + SfDiagramComponent sfDiagram; + public AddDeleteTool(SfDiagramComponent Diagram) : base(Diagram) + { + sfDiagram = Diagram; + } + public override void OnMouseUp(DiagramMouseEventArgs args) + { + bool GroupAction = false; + sfDiagram.BeginUpdate(); + if (sfDiagram.SelectionSettings.Nodes.Count > 1 || sfDiagram.SelectionSettings.Connectors.Count > 1 || + ((sfDiagram.SelectionSettings.Nodes.Count + sfDiagram.SelectionSettings.Connectors.Count) > 1)) + { + GroupAction = true; + } + if (GroupAction) + { + sfDiagram.StartGroupAction(); + } + if (sfDiagram.SelectionSettings.Nodes.Count != 0) + { + for (var i = sfDiagram.SelectionSettings.Nodes.Count - 1; i >= 0; i--) + { + Node deleteNode = sfDiagram.SelectionSettings.Nodes[i]; + sfDiagram.Nodes.Remove(deleteNode); + } + } + if (sfDiagram.SelectionSettings.Connectors.Count != 0) + { + for (var i = sfDiagram.SelectionSettings.Connectors.Count - 1; i >= 0; i--) + { + Connector deleteConnector = sfDiagram.SelectionSettings.Connectors[i]; + sfDiagram.Connectors.Remove(deleteConnector); + } + } + if (GroupAction) + { + sfDiagram.EndGroupAction(); + } + _ = sfDiagram.EndUpdateAsync(); + base.OnMouseUp(args); + this.InAction = true; + } + } + public class CloneTool : DragController + { + SfDiagramComponent sfDiagram; + public CloneTool(SfDiagramComponent Diagram) : base(Diagram) + { + sfDiagram = Diagram; + } + public override void OnMouseDown(DiagramMouseEventArgs args) + { + NodeBase newObject; + if (sfDiagram.SelectionSettings.Nodes.Count > 0) + { + newObject = (sfDiagram.SelectionSettings.Nodes[0]).Clone() as Node; + } + else + { + newObject = (sfDiagram.SelectionSettings.Connectors[0]).Clone() as Connector; + } + newObject.ID += sfDiagram.Nodes.Count.ToString(); + sfDiagram.Copy(); + sfDiagram.Paste(); + ObservableCollection obj = new ObservableCollection() { sfDiagram.Nodes[sfDiagram.Nodes.Count - 1] as IDiagramObject }; + sfDiagram.Select(obj); + base.OnMouseDown(args); + this.InAction = true; + } + } + protected override void OnInitialized() + { + UserHandle cloneHandle = new UserHandle() + { + Name = "clone", + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Offset = 0, + Visible = true, + Side = Direction.Top, + Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Size = 30, + PathColor = "yellow", + BorderColor = "red", + BackgroundColor = "green", + BorderWidth = 3, + }; + UserHandle nodeDelete = new UserHandle() + { + Name = "nodeDelete", + PathData = "M 33.986328 15 A 1.0001 1.0001 0 0 0 33 16 L 33 71.613281 A 1.0001 1.0001 0 0 0 34.568359 72.435547 L 47.451172 63.53125 L 56.355469 85.328125 A 1.0001 1.0001 0 0 0 57.667969 85.871094 L 66.191406 82.298828 A 1.0001 1.0001 0 0 0 66.730469 80.998047 L 57.814453 59.171875 L 73.195312 56.115234 A 1.0001 1.0001 0 0 0 73.708984 54.429688 L 34.708984 15.294922 A 1.0001 1.0001 0 0 0 33.986328 15 z M 35 18.419922 L 70.972656 54.517578 L 56.234375 57.447266 A 1.0001 1.0001 0 0 0 55.503906 58.806641 L 64.503906 80.835938 L 57.826172 83.636719 L 48.832031 61.623047 A 1.0001 1.0001 0 0 0 47.337891 61.177734 L 35 69.707031 L 35 18.419922 z M 37.494141 23.970703 A 0.50005 0.50005 0 0 0 37 24.470703 L 37 58.5 A 0.50005 0.50005 0 1 0 38 58.5 L 38 25.679688 L 51.123047 38.849609 A 0.50005 0.50005 0 1 0 51.832031 38.144531 L 37.853516 24.117188 A 0.50005 0.50005 0 0 0 37.494141 23.970703 z M 53.496094 40.021484 A 0.50005 0.50005 0 0 0 53.146484 40.878906 L 64.898438 52.671875 L 61.359375 53.373047 A 0.50005 0.50005 0 1 0 61.552734 54.353516 L 66.007812 53.470703 A 0.50005 0.50005 0 0 0 66.263672 52.626953 L 53.853516 40.173828 A 0.50005 0.50005 0 0 0 53.496094 40.021484 z M 58.521484 53.941406 A 0.50005 0.50005 0 0 0 58.4375 53.951172 L 51.482422 55.330078 A 0.50005 0.50005 0 0 0 51.117188 56.009766 L 51.794922 57.666016 A 0.50016022 0.50016022 0 1 0 52.720703 57.287109 L 52.273438 56.193359 L 58.632812 54.931641 A 0.50005 0.50005 0 0 0 58.521484 53.941406 z M 53.089844 59.017578 A 0.50005 0.50005 0 0 0 52.630859 59.714844 L 53.037109 60.708984 A 0.50005 0.50005 0 1 0 53.962891 60.332031 L 53.556641 59.335938 A 0.50005 0.50005 0 0 0 53.089844 59.017578 z M 54.300781 61.984375 A 0.50005 0.50005 0 0 0 53.841797 62.679688 L 60.787109 79.679688 A 0.50016068 0.50016068 0 0 0 61.712891 79.300781 L 54.767578 62.302734 A 0.50005 0.50005 0 0 0 54.300781 61.984375 z", + Offset = 1, + Visible = true, + Side = Direction.Left, + Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Size = 30, + PathColor = "yellow", + BorderColor = "red", + BackgroundColor = "green", + BorderWidth = 3, + }; + UserHandle changeCursor = new UserHandle() + { + Name = "changeCursor", + Offset = 0.5, + Source = "https://www.w3schools.com/images/w3schools_green.jpg", + Visible = true, + Side = Direction.Bottom, + Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Size = 30, + PathColor = "yellow", + BorderColor = "red", + BackgroundColor = "green", + BorderWidth = 3, + }; + UserHandles = new DiagramObjectCollection() + { + cloneHandle,nodeDelete,changeCursor + }; + SelectedModel.UserHandles = UserHandles; + nodes = new DiagramObjectCollection(); + Node DiagramNode = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } + }; + connectors = new DiagramObjectCollection(); + Connector Connector1 = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 250, Y = 250 }, + TargetPoint = new DiagramPoint() { X = 350, Y = 350 }, + Annotations = new DiagramObjectCollection() + { + new PathAnnotation() + { + ID = "connector1", + Offset = 0, + Visibility = true, + Style = new TextStyle(){ Color ="red", FontSize =12, TextAlign = TextAlign.Right, + }, + } + }, + Type = ConnectorSegmentType.Bezier + }; + nodes.Add(DiagramNode); + connectors.Add(Connector1); + } +} diff --git a/Diagram/Server/Pages/Methods/GetObjectMethod.razor b/Diagram/Server/Pages/Methods/GetObjectMethod.razor new file mode 100644 index 0000000..def5a30 --- /dev/null +++ b/Diagram/Server/Pages/Methods/GetObjectMethod.razor @@ -0,0 +1,87 @@ +@page "/GetObjectMethod" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +
+ + + + +
+ +
+ +
+ +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + //Method to get object + public void GetObjectMethod() + { + Node node = diagram.GetObject("node1") as Node; + diagram.Select(new System.Collections.ObjectModel.ObservableCollection (){node}); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/GetPageBounds.razor b/Diagram/Server/Pages/Methods/GetPageBounds.razor new file mode 100644 index 0000000..a812a6d --- /dev/null +++ b/Diagram/Server/Pages/Methods/GetPageBounds.razor @@ -0,0 +1,86 @@ +@page "/GetPageBounds" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +
+ + + + +
+ +
+ +
+ +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + //Method to get pagebounds value + public void GetPageBounds() + { + DiagramRect diagramRect = diagram.GetPageBounds(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/GetParent.razor b/Diagram/Server/Pages/Methods/GetParent.razor new file mode 100644 index 0000000..025d3d5 --- /dev/null +++ b/Diagram/Server/Pages/Methods/GetParent.razor @@ -0,0 +1,43 @@ +@page "/GetParent" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Buttons + + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + ID = "node", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + BackgroundColor = "red", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + // Pivot of the node. + Pivot = new DiagramPoint() { X = 0, Y = 0 } + }; + nodes.Add(node); + } + private void GetParent() + { + IDiagramObject parent = diagram.Nodes[0].GetParent(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/RefereshDataSource.razor b/Diagram/Server/Pages/Methods/RefereshDataSource.razor new file mode 100644 index 0000000..295c24a --- /dev/null +++ b/Diagram/Server/Pages/Methods/RefereshDataSource.razor @@ -0,0 +1,76 @@ +@page "/RefereshDataSource" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + //Creates nodes with some default values. + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 25; + node.Width = 25; + node.BackgroundColor = "#6BA5D7"; + node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "white" }; + node.Shape = new BasicShape() { Type = NodeShapes.Basic }; ; + } + + //Creates connectors with some default values. + private void OnConnectorCreating(IDiagramObject connector) + { + Connector connectors = connector as Connector; + connectors.Type = ConnectorSegmentType.Bezier; + connectors.Style = new ShapeStyle() { StrokeColor = "#6495ED", StrokeWidth = 2 }; + connectors.TargetDecorator = new DecoratorSettings + { + Shape = DecoratorShape.None, + }; + } + + public class MindMapDetails + { + public string Id { get; set; } + public string Label { get; set; } + public string ParentId { get; set; } + public string Branch { get; set; } + public string Fill { get; set; } + } + + public object DataSource = new List() + { + new MindMapDetails() { Id= "1",Label="Creativity", ParentId ="", Branch = "Root"}, + new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1", Branch = "Right" }, + new MindMapDetails() { Id= "3", Label="Complementing", ParentId ="1", Branch = "Left" }, + new MindMapDetails() { Id= "4", Label="Sessions", ParentId ="2", Branch = "subRight" }, + new MindMapDetails() { Id= "5", Label="Complementing", ParentId ="2", Branch = "subRight" }, + new MindMapDetails() { Id= "6", Label= "Local", ParentId ="3", Branch = "subRight" }, + new MindMapDetails() { Id= "7", Label= "Remote", ParentId ="3", Branch = "subRight" }, + new MindMapDetails() { Id= "8", Label= "Individual", ParentId ="3", Branch = "subRight" }, + new MindMapDetails() { Id= "9", Label= "Teams", ParentId ="3", Branch = "subRight" }, + new MindMapDetails() { Id= "10", Label= "Ideas", ParentId ="5", Branch = "subRight" }, + new MindMapDetails() { Id= "11", Label= "Engagement", ParentId ="5", Branch = "subRight" }, + }; + private async void RefreshDataSource() + { + DataSource = new List() + { + new MindMapDetails() { Id= "1",Label="Creativity", ParentId ="", Branch = "Root"}, + new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1", Branch = "Right" }, + new MindMapDetails() { Id= "3", Label="Complementing", ParentId ="1", Branch = "Left" }, + new MindMapDetails() { Id= "4", Label="Sessions", ParentId ="2", Branch = "subRight" }, + new MindMapDetails() { Id= "5", Label="Complementing", ParentId ="2", Branch = "subRight" }, + }; + await Diagram.RefreshDataSourceAsync(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/ResetZoom.razor b/Diagram/Server/Pages/Methods/ResetZoom.razor new file mode 100644 index 0000000..0b8d0ee --- /dev/null +++ b/Diagram/Server/Pages/Methods/ResetZoom.razor @@ -0,0 +1,96 @@ +@page "/ResetZoom" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +
+ + + + +
+ +
+ + + +
+ +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + + public void ZoomIn() + { + diagram.Zoom(1.2, new DiagramPoint { X = 100, Y = 100 }); + } + public void ZoomOut() + { + diagram.Zoom(1 / 1.2, new DiagramPoint { X = 100, Y = 100 }); + } + private void ResetZoom() + { + diagram.ResetZoom(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/ScaleMethod.razor b/Diagram/Server/Pages/Methods/ScaleMethod.razor new file mode 100644 index 0000000..209a5fb --- /dev/null +++ b/Diagram/Server/Pages/Methods/ScaleMethod.razor @@ -0,0 +1,86 @@ +@page "/ScaleMethod" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +
+ + + + +
+ +
+ +
+ +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + //Method to scale the selected objects in the diagram + public void ScaleMethod() + { + diagram.Scale(diagram.SelectionSettings.Nodes[0], 10, 10, new DiagramPoint(0.5, 0.5)); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/SelectAllMethod.razor b/Diagram/Server/Pages/Methods/SelectAllMethod.razor new file mode 100644 index 0000000..2386e4c --- /dev/null +++ b/Diagram/Server/Pages/Methods/SelectAllMethod.razor @@ -0,0 +1,87 @@ +@page "/SelectAllMethod" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +
+ + + + +
+ +
+ + +
+ +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + //Method to select all objects in the diagram + public void SelectAllMethod() + { + diagram.SelectAll(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/UnSelectMethod.razor b/Diagram/Server/Pages/Methods/UnSelectMethod.razor new file mode 100644 index 0000000..eaeb54a --- /dev/null +++ b/Diagram/Server/Pages/Methods/UnSelectMethod.razor @@ -0,0 +1,86 @@ +@page "/UnSelectMethod" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +
+ + + + +
+ +
+ +
+ +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + //Method to unselect the selected objects + public void UnSelectMethod() + { + diagram.UnSelect(diagram.SelectionSettings.Nodes[0] as IDiagramObject); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Methods/ZoomAndPan.razor b/Diagram/Server/Pages/Methods/ZoomAndPan.razor new file mode 100644 index 0000000..d5e8c57 --- /dev/null +++ b/Diagram/Server/Pages/Methods/ZoomAndPan.razor @@ -0,0 +1,94 @@ +@page "/ZoomAndPan" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + +
+ + + + +
+ +
+ + + +
+ +@code { + //Reference the diagram + public SfDiagramComponent diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + + //Method to zoom the diagram + public void Zoom() + { + diagram.Zoom(1.2, new DiagramPoint { X = 100, Y = 100 }); + } + //Method to pan the diagram + public void Pan() + { + diagram.Pan(100, 200, new DiagramPoint { X = 100, Y = 100 }); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ActionsofNodes/AddNode.razor b/Diagram/Server/Pages/Nodes/ActionsofNodes/AddNode.razor new file mode 100644 index 0000000..c6b9fb1 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ActionsofNodes/AddNode.razor @@ -0,0 +1,30 @@ +@page "/AddNode" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ActionsofNodes/AddNodeAtRuntime.razor b/Diagram/Server/Pages/Nodes/ActionsofNodes/AddNodeAtRuntime.razor new file mode 100644 index 0000000..f01f506 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ActionsofNodes/AddNodeAtRuntime.razor @@ -0,0 +1,47 @@ +@page "/AddNodeAtRuntime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED" } + }; + nodes.Add(node); + } + //Method to add node at runtime + public void AddNode() + { + Node NewNode = new Node() + { + ID = "node2", + // Position of the node + OffsetX = 450, + OffsetY = 450, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED" } + }; + nodes.Add(NewNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ActionsofNodes/CreateNode.razor b/Diagram/Server/Pages/Nodes/ActionsofNodes/CreateNode.razor new file mode 100644 index 0000000..7cec6ec --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ActionsofNodes/CreateNode.razor @@ -0,0 +1,88 @@ +@page "/CreateNode" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + //Initailize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initailize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + // A node is created and stored in the nodes collection. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + + }; + // Add node + nodes.Add(node); + + Connector straightconnector = new Connector() + { + ID = "straight", + SourcePoint = new DiagramPoint() { X = 400, Y = 250 }, + TargetPoint = new DiagramPoint() { X = 500, Y = 350 }, + Style = new ShapeStyle() { StrokeColor = "#6495ED" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" } + }, + Segments = new DiagramObjectCollection() + { + new StraightSegment(){Point=new DiagramPoint(420,300)}, + } + }; + + connectors.Add(straightconnector); + + Connector orthogonalconnector = new Connector() + { + ID = "orthogonal", + SourcePoint = new DiagramPoint() { X = 250, Y = 500 }, + TargetPoint = new DiagramPoint() { X = 350, Y = 650 }, + Style = new ShapeStyle() { StrokeColor = "#6495ED" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" } + }, + Type = ConnectorSegmentType.Orthogonal, + }; + + connectors.Add(orthogonalconnector); + + Connector bezierconnector = new Connector() + { + ID = "bezier", + SourcePoint = new DiagramPoint() { X = 400, Y = 500 }, + TargetPoint = new DiagramPoint() { X = 500, Y = 650 }, + Style = new ShapeStyle() { StrokeColor = "#6495ED" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" } + }, + Type = ConnectorSegmentType.Bezier, + }; + + connectors.Add(bezierconnector); + + } +} diff --git a/Diagram/Server/Pages/Nodes/ActionsofNodes/NodeFromPalette.razor b/Diagram/Server/Pages/Nodes/ActionsofNodes/NodeFromPalette.razor new file mode 100644 index 0000000..2838ba3 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ActionsofNodes/NodeFromPalette.razor @@ -0,0 +1,68 @@ +@page "/NodeFromPalette" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using System.Collections.ObjectModel + + +
+ + +
+
+ + +
+@code +{ + SfDiagramComponent Diagram; + //Reference the symbol palette + SfSymbolPaletteComponent PaletteInstance; + DiagramSize SymbolPreview; + string paletteWidth = "300"; + string paletteHeight = "800"; + //Intialize the palette's collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + SymbolMargin SymbolMargin = new SymbolMargin { Left = 10, Right = 10, Top = 10, Bottom = 10 }; + double symbolSizeWidth; + double symbolSizeHeight; + // Defines palette's flow-shape collection + public DiagramObjectCollection FlowShapeList + { get; set; } + + // Defines Symbol info + public SymbolInfo SymbolInfo { get; set; } + + protected override void OnInitialized() + { + // Sets the symbol info + SymbolInfo = new SymbolInfo() { Fit = true }; + + // Add shapes to palette + FlowShapeList = new DiagramObjectCollection() + { + new Node() + { + ID = "Terminator", + // Sets the shape of the node + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator } + } + }; + Palettes.Add( + new Palette() + { + ID = "FlowShape", + IsExpanded = true, + Symbols = FlowShapeList, + Title = "Flow Shapes", + } + ); + + } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + PaletteInstance.Targets = new DiagramObjectCollection() { }; + PaletteInstance.Targets.Add(Diagram); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ActionsofNodes/RemoveNode.razor b/Diagram/Server/Pages/Nodes/ActionsofNodes/RemoveNode.razor new file mode 100644 index 0000000..60715b5 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ActionsofNodes/RemoveNode.razor @@ -0,0 +1,38 @@ +@page "/RemoveNode" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Defines diagram's Node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } + + public void RemoveNodes() + { + // Remove Node at runtime + nodes.Remove(nodes[0]); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ActionsofNodes/UpdateNode.razor b/Diagram/Server/Pages/Nodes/ActionsofNodes/UpdateNode.razor new file mode 100644 index 0000000..18fe41d --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ActionsofNodes/UpdateNode.razor @@ -0,0 +1,41 @@ +@page "/UpdateNode" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent Diagram; + //Defines diagram's node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + nodes.Add(node); + } + //Method to Update node's width and height at runtime + public async void UpdateNodes() + { + Diagram.BeginUpdate(); + Diagram.Nodes[0].Width = 50; + Diagram.Nodes[0].Height = 50; + await Diagram.EndUpdateAsync(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/BackgroundColor.razor b/Diagram/Server/Pages/Nodes/Appearance/BackgroundColor.razor new file mode 100644 index 0000000..af104e6 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/BackgroundColor.razor @@ -0,0 +1,31 @@ +@page "/BackgroundColor" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + ID = "node", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + BackgroundColor = "red", + Shape = new BasicShape(){Shape = NodeBasicShapes.Star} + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/BorderColor.razor b/Diagram/Server/Pages/Nodes/Appearance/BorderColor.razor new file mode 100644 index 0000000..639f0e5 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/BorderColor.razor @@ -0,0 +1,37 @@ +@page "/BorderColor" + + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + + // A node is created and stored in nodes array. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 100, + OffsetY = 100, + // Size of the node + Width = 100, + Height = 100, + + // Sets the border color of the node + BorderColor = "Orange", + + // Sets the border width for better visibility + BorderWidth = 20 + }; + + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/BorderWidth.razor b/Diagram/Server/Pages/Nodes/Appearance/BorderWidth.razor new file mode 100644 index 0000000..c9a8ca7 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/BorderWidth.razor @@ -0,0 +1,37 @@ +@page "/BorderWidth" + + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + + // A node is created and stored in nodes array. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 100, + OffsetY = 100, + // Size of the node + Width = 100, + Height = 100, + + // Sets the border color of the node + BorderColor = "Orange", + + // Sets the border width for better visibility + BorderWidth = 20 + }; + + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/CanAutoLayout.razor b/Diagram/Server/Pages/Nodes/Appearance/CanAutoLayout.razor new file mode 100644 index 0000000..3d36fea --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/CanAutoLayout.razor @@ -0,0 +1,69 @@ +@page "/CanAutoLayout" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + + + + +@code +{ + int left = 40; + int top = 50; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + int HorizontalSpacing = 40; + int VerticalSpacing = 40; + + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 40; + node.Width = 100; + //Initialize the default node's shape style. + node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = node.Annotations[0].Content, + Style = new TextStyle() { Color = "white", Bold = true }, + } + }; + } + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + } + + protected override void OnInitialized() + { + //Initialize the node and connectors. + nodes = new DiagramObjectCollection() + { + new Node() { ID="node1", CanAutoLayout = true, Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Steve-Ceo"} } }, + new Node() { ID="node2", CanAutoLayout = true, Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Kevin-Manager"} } }, + new Node() { ID="node3", CanAutoLayout = true, Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Peter-Manager"} } }, + new Node() { ID="node4", CanAutoLayout = true, Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Jim-CSE"} } }, + new Node() { ID="node5", CanAutoLayout = true, Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Martin-CSE"} } }, + new Node() { ID="node6", CanAutoLayout = true, Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="John-Manager"} } }, + new Node() { ID="node7", CanAutoLayout = false, Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Mary-CSE"} } }, + }; + connectors = new DiagramObjectCollection() + { + new Connector() { ID="connector1", SourceID="node1", TargetID="node2" }, + new Connector() { ID="connector2", SourceID="node1", TargetID="node3" }, + new Connector() { ID="connector3", SourceID="node2", TargetID="node4" }, + new Connector() { ID="connector4", SourceID="node2", TargetID="node5" }, + new Connector() { ID="connector5", SourceID="node3", TargetID="node6" }, + new Connector() { ID="connector6", SourceID="node3", TargetID="node7" }, + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/CustomProperty.razor b/Diagram/Server/Pages/Nodes/Appearance/CustomProperty.razor new file mode 100644 index 0000000..3511479 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/CustomProperty.razor @@ -0,0 +1,32 @@ +@page "/CustomProperty" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Dictionary NodeInfo = new Dictionary(); + NodeInfo.Add("nodeInfo", "Central Node"); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + AdditionalInfo = NodeInfo + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/CustomShadow.razor b/Diagram/Server/Pages/Nodes/Appearance/CustomShadow.razor new file mode 100644 index 0000000..717b603 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/CustomShadow.razor @@ -0,0 +1,37 @@ +@page "/CustomShadow" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + Constraints = NodeConstraints.Default | NodeConstraints.Shadow, + // Custom Shadow of the node + Shadow = new Shadow() + { + Angle = 50, + Color = "Blue", + Opacity = 0.8, + Distance = 20 + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/DataProperty.razor b/Diagram/Server/Pages/Nodes/Appearance/DataProperty.razor new file mode 100644 index 0000000..4abaad6 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/DataProperty.razor @@ -0,0 +1,78 @@ +@page "/DataProperty" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + + + + + +@code +{ + int left = 40; + int top = 50; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + int HorizontalSpacing = 40; + int VerticalSpacing = 40; + + private void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Height = 40; + node.Width = 100; + HierarchicalDetails Data = node.Data as HierarchicalDetails; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = Data.Role + } + }; + //Initializing the default node's shape style. + node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }; + } + + private void OnConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + } + + public class HierarchicalDetails + { + public string Id { get; set; } + public string Role { get; set; } + public string Manager { get; set; } + public string ChartType { get; set; } + public string Color { get; set; } + } + public List DataSource = new List() + { + new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" } + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/InedgesOutedges.razor b/Diagram/Server/Pages/Nodes/Appearance/InedgesOutedges.razor new file mode 100644 index 0000000..405e2d2 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/InedgesOutedges.razor @@ -0,0 +1,52 @@ +@page "/InedgesOutedges" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; + connectors.Add(connector1); + } + private void GetInEdges() + { + List Inedges = new List(); + foreach (string inedge in diagram.Nodes[1].InEdges) + { + Inedges.Add(inedge); + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/LinearGradientStyle.razor b/Diagram/Server/Pages/Nodes/Appearance/LinearGradientStyle.razor new file mode 100644 index 0000000..131950d --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/LinearGradientStyle.razor @@ -0,0 +1,45 @@ +@page "/LinearGradientStyle" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Gradient = new LinearGradientBrush() + { + //Start point of linear gradient + X1 = 0, + Y1 = 0, + ////End point of linear gradient + X2 = 50, + Y2 = 50, + //Sets an array of stop objects + GradientStops = new DiagramObjectCollection() + { + new GradientStop(){ Color = "white", Offset = 0}, + new GradientStop(){ Color = "#6495ED", Offset = 100} + }, + } + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/NodeAppearance.razor b/Diagram/Server/Pages/Nodes/Appearance/NodeAppearance.razor new file mode 100644 index 0000000..80f7033 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/NodeAppearance.razor @@ -0,0 +1,29 @@ +@page "/NodeAppearance" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + // Add node + Style = new ShapeStyle() { Fill = "Green", StrokeDashArray = "5,5", StrokeColor = "red", StrokeWidth = 2 }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/NodeDefaultSample.razor b/Diagram/Server/Pages/Nodes/Appearance/NodeDefaultSample.razor new file mode 100644 index 0000000..a3fa9d2 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/NodeDefaultSample.razor @@ -0,0 +1,46 @@ +@page "/NodeDefaultSample" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node1 = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Shape of the Node + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; + Node node2 = new Node() + { + // Position of the node + OffsetX = 100, + OffsetY = 100, + // Shape of the Node + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse } + }; + nodes.Add(node1); + nodes.Add(node2); + } + //Method to define nodecreating event + private void NodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Style = new ShapeStyle() { Fill = "#6495ED" }; + // Size of the node + node.Width = 100; + node.Height = 100; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/NodeShadow.razor b/Diagram/Server/Pages/Nodes/Appearance/NodeShadow.razor new file mode 100644 index 0000000..09c2c91 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/NodeShadow.razor @@ -0,0 +1,29 @@ +@page "/NodeShadow" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + Constraints = NodeConstraints.Default | NodeConstraints.Shadow + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/NodeTemplate.razor b/Diagram/Server/Pages/Nodes/Appearance/NodeTemplate.razor new file mode 100644 index 0000000..359943f --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/NodeTemplate.razor @@ -0,0 +1,79 @@ +@page "/NodeTemplate" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + @{ + +
+
+ + + + + +
IDOffset
node0100
+ + +
+
+ } + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Define diaram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + Width = 137, + Height = 64, + OffsetX = 300, + OffsetY = 100, + ID = "html1", + Shape = new Shape() { Type = NodeShapes.HTML }, + }; + nodes.Add(node); + } + + public void OnClick() + { + nodes[0].BackgroundColor = "cornflowerblue"; + StateHasChanged(); + } +} diff --git a/Diagram/Server/Pages/Nodes/Appearance/PivotProperty.razor b/Diagram/Server/Pages/Nodes/Appearance/PivotProperty.razor new file mode 100644 index 0000000..03b1b0f --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/PivotProperty.razor @@ -0,0 +1,37 @@ +@page "/PivotProperty" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + ID = "node", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + ZIndex = 2, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + // Pivot of the node. + Pivot = new DiagramPoint() { X = 0, Y = 0 }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/RadientGradientStyle.razor b/Diagram/Server/Pages/Nodes/Appearance/RadientGradientStyle.razor new file mode 100644 index 0000000..606fb06 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/RadientGradientStyle.razor @@ -0,0 +1,47 @@ +@page "/RadientGradientStyle" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() + { + Fill = "37909A#", + StrokeColor = "#024249", + Gradient = new RadialGradientBrush() + { + //Center point of outer circle + CX = 50, + CY = 50, + //Center point of inner circle + FX = 50, + FY = 50, + GradientStops = new DiagramObjectCollection() + { + new GradientStop() { Color = "#00555b", Offset = 45 }, + new GradientStop() { Color= "#37909A", Offset= 90 } + }, + } + }, + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/SetTemplate.razor b/Diagram/Server/Pages/Nodes/Appearance/SetTemplate.razor new file mode 100644 index 0000000..69eff8d --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/SetTemplate.razor @@ -0,0 +1,97 @@ +@page "/SetTemplate" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + +@* Initialize Diagram *@ + + +@code +{ + // Initialize node collection with node + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node1 = new Node() + { + ID = "node1", + // Size of the node + Height = 100, + Width = 100, + // Position of the node + OffsetX = 100, + OffsetY = 100, + }; + Node node2 = new Node() + { + ID = "node6", + // Size of the node + Height = 510, + Width = 202, + // Position of the node + OffsetX = 300, + OffsetY = 100, + }; + nodes.Add(node1); + nodes.Add(node2); + } + //SetNode Template method + private CommonElement SetNodeTemplate(IDiagramObject node) + { + if ((node as Node).ID == "node6") + { + var table = new StackPanel(); + table.Style = new ShapeStyle() { Fill = "#e6e0eb", StrokeColor = "#e6e0eb" }; + table.Orientation = Orientation.Horizontal; + var column1 = new StackPanel(); + column1.Style = new ShapeStyle() { Fill = "#6F409F", StrokeColor = "#6F409F" }; + column1.Margin = new DiagramThickness() { Bottom = 10, Left = 10, Right = 10, Top = 10 }; + column1.Padding = new DiagramThickness() { Bottom = 10, Left = 10, Right = 10, Top = 10 }; + column1.Children = new ObservableCollection(); + column1.Children.Add(getTextElement("Events")); + + var column2 = new StackPanel(); + column2.Margin = new DiagramThickness() { Bottom = 10, Left = 10, Right = 10, Top = 10 }; + column2.Padding = new DiagramThickness() { Bottom = 10, Left = 10, Right = 10, Top = 10 }; + column2.Children = new ObservableCollection(); + column2.Children.Add(getTextElement("Emails")); + column2.Style = new ShapeStyle() { Fill = "#6F409F", StrokeColor = "#6F409F" }; + + var column3 = new StackPanel(); + column3.Margin = new DiagramThickness() { Bottom = 10, Left = 10, Right = 10, Top = 10 }; + column3.Padding = new DiagramThickness() { Bottom = 10, Left = 10, Right = 10, Top = 10 }; + column3.Children = new ObservableCollection(); + column3.Children.Add(getTextElement("Calls")); + column3.Style = new ShapeStyle() { Fill = "#6F409F", StrokeColor = "#6F409F" }; + + var column4 = new StackPanel(); + column4.Margin = new DiagramThickness() { Bottom = 10, Left = 10, Right = 10, Top = 10 }; + column4.Padding = new DiagramThickness() { Bottom = 10, Left = 10, Right = 10, Top = 10 }; + column4.Children = new ObservableCollection(); + column4.Children.Add(getTextElement("Smart contents")); + column4.Style = new ShapeStyle() { Fill = "#6F409F", StrokeColor = "#6F409F" }; + + table.Orientation = Orientation.Vertical; + table.Children = new ObservableCollection() { column1, column2, column3, column4 }; + return table; + } + else + { + (node as Node).Style = new ShapeStyle() { Fill = "#6F409F", StrokeColor = "#6F409F", StrokeWidth = 2 }; + (node as Node).Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 10 }; + } + return null; + } + + private TextElement getTextElement(string text) + { + var textElement = new TextElement(); + textElement.Width = 60; + textElement.Height = 20; + textElement.Content = text; + textElement.Style = new TextStyle() { Color = "white" }; + return textElement; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Appearance/ZIndexProperty.razor b/Diagram/Server/Pages/Nodes/Appearance/ZIndexProperty.razor new file mode 100644 index 0000000..65d6da7 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Appearance/ZIndexProperty.razor @@ -0,0 +1,53 @@ +@page "/ZIndexProperty" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // nodes are created and stored in nodes array. + Node node1 = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + ZIndex = 2, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + }; + nodes.Add(node1); + + Node node2 = new Node() + { + ID = "node2", + // Position of the node. + OffsetX = 300, + OffsetY = 300, + // Size of the node. + Width = 100, + Height = 100, + ZIndex = 1, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + }; + nodes.Add(node2); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/CloneNode/CloneNode.razor b/Diagram/Server/Pages/Nodes/CloneNode/CloneNode.razor new file mode 100644 index 0000000..4bc0c68 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/CloneNode/CloneNode.razor @@ -0,0 +1,55 @@ +@page "/CloneNode" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Buttons +@inject IJSRuntime js + + + + +@functions +{ + + SfDiagramComponent diagram; + public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 200, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "node1" + }, + }, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Process } + }; + NodeCollection.Add(node1); + } + public async Task CloneNode() + { + Node node = NodeCollection[0].Clone() as Node; + node.ID = RandomId(); + node.OffsetX += 25; + node.OffsetY += 25; + await diagram.AddDiagramElementsAsync(new DiagramObjectCollection() { node }); + } + + internal string RandomId() + { + Random random = new Random(); + const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; +#pragma warning disable CA5394 // Do not use insecure randomness + return new string(Enumerable.Repeat(chars, 5) + .Select(s => s[random.Next(s.Length)]).ToArray()); +#pragma warning restore CA5394 // Do not use insecure randomness + } + +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Events/CollectionChangeEvent.razor b/Diagram/Server/Pages/Nodes/Events/CollectionChangeEvent.razor new file mode 100644 index 0000000..2d34970 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Events/CollectionChangeEvent.razor @@ -0,0 +1,34 @@ +@page "/CollectionChangeEvent" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + +@code{ + //Reference the diagram + SfDiagramComponent Diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100 + }; + nodes.Add(node); + } + // Notify the Collection Changed event while changing the collection of the node or connector at run time. + private void OnCollectionChanged(CollectionChangedEventArgs args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Events/MouseEnterEvent.razor b/Diagram/Server/Pages/Nodes/Events/MouseEnterEvent.razor new file mode 100644 index 0000000..758e0ea --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Events/MouseEnterEvent.razor @@ -0,0 +1,33 @@ +@page "/MouseEnterEvent" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100 + }; + nodes.Add(node); + } + private void OnMouseEnter(DiagramElementMouseEventArgs args) + { + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Events/MouseHoverEvent.razor b/Diagram/Server/Pages/Nodes/Events/MouseHoverEvent.razor new file mode 100644 index 0000000..5e8bd64 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Events/MouseHoverEvent.razor @@ -0,0 +1,33 @@ +@page "/MouseHoverEvent" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100 + }; + nodes.Add(node); + } + private void OnMouseHover(DiagramElementMouseEventArgs args) + { + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Events/MouseLeaveEvent.razor b/Diagram/Server/Pages/Nodes/Events/MouseLeaveEvent.razor new file mode 100644 index 0000000..481ef22 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Events/MouseLeaveEvent.razor @@ -0,0 +1,33 @@ +@page "/MouseLeaveEvent" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + +@code { + //Reference the diagram + SfDiagramComponent Diagram; + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100 + }; + nodes.Add(node); + } + private void OnMouseLeave(DiagramElementMouseEventArgs args) + { + + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Events/NodeCreatingEvent.razor b/Diagram/Server/Pages/Nodes/Events/NodeCreatingEvent.razor new file mode 100644 index 0000000..922c6dd --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Events/NodeCreatingEvent.razor @@ -0,0 +1,43 @@ +@page "/NodeCreatingEvent" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Define the node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in node collection. + Node node = new Node() + { + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + } + }; + // Add node. + nodes.Add(node); + } + + public void OnNodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + node.Style.Fill = "#357BD2"; + node.Style.StrokeColor = "White"; + node.Style.Opacity = 1; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Events/PositionChange.razor b/Diagram/Server/Pages/Nodes/Events/PositionChange.razor new file mode 100644 index 0000000..fa5d09e --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Events/PositionChange.razor @@ -0,0 +1,50 @@ +@page "/PositionChange" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // To define node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Shape = new Shape() { Type = NodeShapes.Basic } + }; + // Add node. + nodes.Add(node); + } + + // Event to notify the position changing event while dragging the elements in diagram. + public void OnPositionChanging(PositionChangingEventArgs args) + { + // Sets true to cancel the action. + args.Cancel = true; + } + + //Event to notify the position changed event when the node's or connector's position is changed. + public void OnPositionChanged(PositionChangedEventArgs args) + { + // Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Events/PropertyChangedEvent.razor b/Diagram/Server/Pages/Nodes/Events/PropertyChangedEvent.razor new file mode 100644 index 0000000..7d9ded5 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Events/PropertyChangedEvent.razor @@ -0,0 +1,33 @@ +@page "/PropertyChangedEvent" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + + + +@code{ + SfDiagramComponent Diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100 + }; + nodes.Add(node); + } + // Notify the property changed event while the change property is at run time. + private void OnPropertyChanged(PropertyChangedEventArgs args) + { + //Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Events/RotationChange.razor b/Diagram/Server/Pages/Nodes/Events/RotationChange.razor new file mode 100644 index 0000000..b31e42b --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Events/RotationChange.razor @@ -0,0 +1,49 @@ +@page "/RotationChange" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // To define node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + } + }; + // Add node. + nodes.Add(node); + } + + // Event to notify the rotation changing event before the node is rotated. + public void OnRotateChanging(RotationChangingEventArgs args) + { + // Sets true to cancel the rotation + args.Cancel = true; + } + + // Event to notify the rotation changed event after the node is rotated. + public void OnRotateChanged(RotationChangedEventArgs args) + { + // Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Events/SelectionChange.razor b/Diagram/Server/Pages/Nodes/Events/SelectionChange.razor new file mode 100644 index 0000000..8f25c87 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Events/SelectionChange.razor @@ -0,0 +1,50 @@ +@page "/SelectionChange" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // To define node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + // Appearances of the node + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + } + }; + // Add node. + nodes.Add(node); + } + + // Event to notify the selection changing event before selecting/unselecting the diagram elements. + public void OnSelectionChanging(SelectionChangingEventArgs args) + { + // Sets true to cancel the selection. + args.Cancel = true; + } + + // Event to notify the selection changed event after selecting/unselecting the diagram elements. + public void OnSelectionChanged(SelectionChangedEventArgs args) + { + // Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Events/SizeChange.razor b/Diagram/Server/Pages/Nodes/Events/SizeChange.razor new file mode 100644 index 0000000..2fc7267 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Events/SizeChange.razor @@ -0,0 +1,49 @@ +@page "/SizeChange" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // To define node collection. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + } + }; + // Add node. + nodes.Add(node); + } + + // Event to notify the Size changing event before the diagram elements size is changed. + public void OnSizeChanging(SizeChangingEventArgs args) + { + // Sets true to cancel the resize action + args.Cancel = true; + } + + // Event to notify the Size change event after the diagram elements size is changed. + public void OnSizeChanged(SizeChangedEventArgs args) + { + // Action to be performed. + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/Appearance.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/Appearance.razor new file mode 100644 index 0000000..15aaac8 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/Appearance.razor @@ -0,0 +1,94 @@ +@page "/Appearance" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node1" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Path, + Height = 20, + Width = 20, + PathData = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z", + CornerRadius = 10, + Fill = "Gray", + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + Fill = "Gray", + BorderColor = "Blue", + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node2" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + }, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/CornerRadius.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/CornerRadius.razor new file mode 100644 index 0000000..1d836dc --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/CornerRadius.razor @@ -0,0 +1,93 @@ +@page "/CornerRadius" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node1" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Path, + Height = 20, + Width = 20, + PathData = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z", + CornerRadius = 10 + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + CornerRadius = 10 + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node2" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + }, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; + connectors.Add(connector1); + } +} diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate.razor new file mode 100644 index 0000000..3274de7 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate.razor @@ -0,0 +1,106 @@ +@page "/ExpandCollapseIconTemplate" + +@using Syncfusion.Blazor.Diagram + + + + + @{ +
+ +
+ } + + + @{ +
+ +
+ } + + + + + @code { + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(){}; + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node1" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Template, + Height = 20, + Width = 20, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Template, + Height = 20, + Width = 20, + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 400, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node2" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + + Shape = DiagramExpandIcons.Template, + Height = 20, + Width = 20, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Template, + Height = 20, + Width = 20, + }, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapseMargin.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapseMargin.razor new file mode 100644 index 0000000..092eedd --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapseMargin.razor @@ -0,0 +1,111 @@ +@page "/ExpandCollapseMargin" + + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + IsExpanded = false, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node1" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + Fill = "Gray", + Margin = new DiagramThickness() + { + Top = 1, + Bottom = 1, + Left = 1, + Right = 1, + }, + BorderColor = "Blue", + BorderWidth = 3, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + Fill = "Gray", + BorderColor = "Blue", + Margin = new DiagramThickness() + { + Top = 1, + Bottom = 1, + Left = 1, + Right = 1, + }, + BorderWidth = 3, + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node2" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + }, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapsePadding.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapsePadding.razor new file mode 100644 index 0000000..d08ee70 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapsePadding.razor @@ -0,0 +1,111 @@ +@page "/ExpandCollapsePadding" + + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + IsExpanded = false, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node1" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + Fill = "Gray", + Padding = new DiagramThickness() + { + Top = 1, + Bottom = 1, + Left = 1, + Right = 1, + }, + BorderColor = "Blue", + BorderWidth = 3, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + Fill = "Gray", + BorderColor = "Blue", + Padding = new DiagramThickness() + { + Top = 1, + Bottom = 1, + Left = 1, + Right = 1, + }, + BorderWidth = 3, + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node2" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + }, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapsewithLayout.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapsewithLayout.razor new file mode 100644 index 0000000..d470a9a --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/ExpandCollapsewithLayout.razor @@ -0,0 +1,131 @@ +@page "/ExpandCollapsewithLayout" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.Internal +@using System.Collections.ObjectModel + + + + + + + + +@code { + + SfDiagramComponent diagram; + double top = 50; + double bottom = 50; + double right = 50; + double left = 50; + LayoutType type = LayoutType.OrganizationalChart; + LayoutOrientation oreintation = LayoutOrientation.TopToBottom; + HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + int HorizontalSpacing = 30; + int VerticalSpacing = 30; + Orientation subTreeOrientation = Orientation.Vertical; + SubTreeAlignmentType subTreeAlignment = SubTreeAlignmentType.Left; + private string FixedNode = null; + //private DiagramRect bounds = new Rect(200, 200, 500, 500); + public class HierarchicalDetails + { + public string Id { get; set; } + public string Role { get; set; } + public string Manager { get; set; } + public string ChartType { get; set; } + public string Color { get; set; } + } + public List DataSource = new List() + { + new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" } + }; + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) + { + if (rows == 0) + { + if (rows == 0 && options.Rows != null) + options.Rows = null; + Node node = obj as Node; + if ((node.Data as HierarchicalDetails).Role == "General Manager") + { + if (options.Children.Count > 0) + { + options.Assistants.Add(options.Children[0]); + options.Children.RemoveAt(0); + } + } + if (!options.HasSubTree) + { + options.Orientation = subTreeOrientation; + options.AlignmentType = subTreeAlignment; + } + } + else + { + if (!options.HasSubTree) + { + options.AlignmentType = SubTreeAlignmentType.Balanced; + options.Orientation = Orientation.Horizontal; + options.Rows = rows; + } + } + return options; + } + private int rows = 0; + private void NodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data is System.Text.Json.JsonElement) + { + node.Data = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString()); + } + HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails; + node.Width = 150; + node.Height = 50; + node.Style.Fill = hierarchicalData.Color; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = hierarchicalData.Role, + Style =new TextStyle(){Color = "white"} + } + }; + node.ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + }; + node.CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + }; + } + private void ConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/Icon.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/Icon.razor new file mode 100644 index 0000000..a9b7f06 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/Icon.razor @@ -0,0 +1,91 @@ +@page "/Icon" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node1" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node2" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + }, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; + connectors.Add(connector1); + } +} + diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/IconWithPathShape.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/IconWithPathShape.razor new file mode 100644 index 0000000..f3d9088 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/IconWithPathShape.razor @@ -0,0 +1,80 @@ +@page "/IconWithPathShape" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node1" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Path, + Height = 20, + Width = 20, + PathData = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Path, + Height = 20, + Width = 20, + PathData = "M 355.31 12.07 C 352.11 5.95 345.35 -1.14 331.41 0.15 C 290.33 3.93 209.61 81.48 190.42 111.69 C 189.66 107.76 187.9 101.49 184.12 98.05 C 189.5 87.75 198.01 69.64 201.57 52.48 C 202.4 52.26 203.12 51.68 203.34 50.44 C 203.72 48.34 204 46.22 204.39 44.13 C 205.01 40.62 199.99 39.43 199.42 42.91 C 199.06 45.06 198.69 47.15 198.35 49.31 C 198.16 50.6 198.69 51.62 199.54 52.14 C 196.08 68.87 187.75 86.63 182.43 96.81 C 181.52 96.29 180.53 95.87 179.41 95.7 C 179.09 95.65 178.8 95.72 178.5 95.71 C 178.19 95.72 177.91 95.65 177.59 95.7 C 176.46 95.87 175.48 96.29 174.56 96.81 C 169.24 86.63 160.92 68.87 157.46 52.14 C 158.3 51.62 158.83 50.6 158.65 49.31 C 158.3 47.15 157.93 45.06 157.58 42.91 C 157.01 39.43 151.99 40.62 152.61 44.13 C 152.99 46.22 153.28 48.34 153.66 50.44 C 153.87 51.68 154.6 52.27 155.42 52.48 C 158.98 69.63 167.49 87.75 172.87 98.05 C 169.09 101.49 167.33 107.76 166.57 111.69 C 147.39 81.48 66.67 3.93 25.59 0.15 C 11.65 -1.14 4.89 5.95 1.69 12.07 C -2.05 19.07 0.84 33.48 6.24 58.46 C 8.66 69.55 11.16 80.96 12.94 92.2 C 13.89 98.36 14.79 104.49 15.64 110.36 C 19.39 136.89 22.52 158.97 32.64 166.04 C 35.41 167.98 38.65 168.78 42.61 168.24 C 52.26 165.95 63.79 164.03 75.99 162.67 C 64.03 171.47 49.08 185.81 44.17 204.84 C 40.38 219.72 43.37 234.86 53.01 250.05 C 64.37 267.81 76.02 279.48 86.91 287.09 C 108.68 302.31 127.52 301.24 135.48 300.78 C 136.3 300.77 136.94 300.71 137.56 300.69 C 143.62 300.61 147.76 291.39 156.6 270.51 C 160.94 260.34 167.39 245.19 172.83 237.47 C 173.97 240.31 177.22 242.31 178.92 242.87 C 178.78 242.94 178.62 243.07 178.49 243.12 C 178.65 243.08 178.83 242.97 179 242.91 C 179.1 242.94 179.25 243.02 179.34 243.04 C 179.26 243.01 179.13 242.93 179.04 242.89 C 180.83 242.24 183.05 240.25 184.16 237.48 C 189.6 245.19 196.05 260.34 200.39 270.52 C 209.23 291.4 213.38 300.61 219.43 300.7 C 220.05 300.72 220.69 300.77 221.51 300.78 C 229.47 301.25 248.31 302.31 270.08 287.1 C 280.97 279.49 292.62 267.81 303.98 250.05 C 313.62 234.86 316.6 219.72 312.82 204.84 C 307.91 185.82 292.96 171.48 281 162.67 C 293.2 164.03 304.73 165.95 314.38 168.24 C 318.34 168.78 321.58 167.98 324.35 166.04 C 334.47 158.97 337.6 136.89 341.35 110.37 C 342.19 104.49 343.1 98.37 344.05 92.2 C 345.83 80.96 348.33 69.55 350.75 58.46 C 356.16 33.48 359.05 19.07 355.31 12.07 z M 183.92 237.56 C 182.35 240.3 180.35 242.13 178.97 242.86 C 177.49 242.19 174.7 240.38 173.08 237.56 C 173.08 237.56 166.19 138.22 166.91 113.58 C 166.91 113.58 169.24 97.92 178.5 97.81 C 187.76 97.92 190.09 113.58 190.09 113.58 C 190.81 138.22 183.92 237.56 183.92 237.56 z" + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node2" + } + }, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/IsExpandedProperty.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/IsExpandedProperty.razor new file mode 100644 index 0000000..343b50e --- /dev/null +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/IsExpandedProperty.razor @@ -0,0 +1,96 @@ +@page "/IsExpandedProperty" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Initialize the diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + IsExpanded = false, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node1" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + Fill = "Gray", + BorderColor = "Blue", + BorderWidth = 3, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + Fill = "Gray", + BorderColor = "Blue", + BorderWidth = 3, + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content="Node2" + } + }, + ExpandIcon = new DiagramExpandIcon() + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + }, + CollapseIcon = new DiagramCollapseIcon() + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + }, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Interaction/Drag.razor b/Diagram/Server/Pages/Nodes/Interaction/Drag.razor new file mode 100644 index 0000000..6f76045 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Interaction/Drag.razor @@ -0,0 +1,40 @@ +@page "/Drag" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + // Reference of the diagram + SfDiagramComponent Diagram; + // To define node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } + + public void OnDrag() + { + // Drag the node + Diagram.Drag(Diagram.Nodes[0], 10, 10); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Interaction/Resize.razor b/Diagram/Server/Pages/Nodes/Interaction/Resize.razor new file mode 100644 index 0000000..32c2bc0 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Interaction/Resize.razor @@ -0,0 +1,40 @@ +@page "/Resize" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + // Reference of the diagram + SfDiagramComponent diagram; + // To define node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } + + public void OnResize() + { + // Resize the node + diagram.Scale(diagram.Nodes[0], 0.5, 0.5, new DiagramPoint() { X = 0, Y = 0 }); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Interaction/Rotate.razor b/Diagram/Server/Pages/Nodes/Interaction/Rotate.razor new file mode 100644 index 0000000..a3780cf --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Interaction/Rotate.razor @@ -0,0 +1,40 @@ +@page "/Rotate" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + // Reference of the diagram + SfDiagramComponent diagram; + // To define node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } + + public void OnRotate() + { + // Rotate the node + diagram.Rotate(diagram.Nodes[0], diagram.Nodes[0].RotationAngle + 10); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Interaction/RotateAngleProperty.razor b/Diagram/Server/Pages/Nodes/Interaction/RotateAngleProperty.razor new file mode 100644 index 0000000..52aa16b --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Interaction/RotateAngleProperty.razor @@ -0,0 +1,25 @@ +@page "/RotateAngleProperty" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Intialize nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + RotationAngle = 50, // Rotates node by 50 degrees + }; + nodes.Add(node); + } +} diff --git a/Diagram/Server/Pages/Nodes/Interaction/Select.razor b/Diagram/Server/Pages/Nodes/Interaction/Select.razor new file mode 100644 index 0000000..9ed8161 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Interaction/Select.razor @@ -0,0 +1,48 @@ +@page "/Select" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + // Reference of the diagram + SfDiagramComponent diagram; + // To define node collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } + + public void OnSelect() + { + // Select the node + diagram.Select(new ObservableCollection { diagram.Nodes[0] }); + } + + public void UnSelect() + { + // clear selection in the diagram + diagram.ClearSelection(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Position/MinMaxSize.razor b/Diagram/Server/Pages/Nodes/Position/MinMaxSize.razor new file mode 100644 index 0000000..ad32f77 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Position/MinMaxSize.razor @@ -0,0 +1,38 @@ +@page "/MinMaxSize" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + ID = "node", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + //Minimum Size of the node + MinHeight = 50, + MinWidth = 50, + //Maximum Size of the node + MaxHeight = 200, + MaxWidth = 200, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } +} + + diff --git a/Diagram/Server/Pages/Nodes/Position/NodeRotateAngle.razor b/Diagram/Server/Pages/Nodes/Position/NodeRotateAngle.razor new file mode 100644 index 0000000..0bb796a --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Position/NodeRotateAngle.razor @@ -0,0 +1,34 @@ +@page "/NodeRotateAngle" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + ID = "node", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // RotationAngle of the node + RotationAngle = 90 + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Nodes/Position/Positioning.razor b/Diagram/Server/Pages/Nodes/Position/Positioning.razor new file mode 100644 index 0000000..42c4e98 --- /dev/null +++ b/Diagram/Server/Pages/Nodes/Position/Positioning.razor @@ -0,0 +1,46 @@ +@page "/Positioning" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + ID = "node", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Pivot of the node + Pivot = new DiagramPoint() { X = 0, Y = 0 } + }; + nodes.Add(node); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + //OnAfterRenderAsync will be triggered after the component rendered. + await Task.Delay(200); + diagram.Select(new ObservableCollection() { diagram.Nodes[0] }); + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Overview/Overview.razor b/Diagram/Server/Pages/Overview/Overview.razor new file mode 100644 index 0000000..45b0eb8 --- /dev/null +++ b/Diagram/Server/Pages/Overview/Overview.razor @@ -0,0 +1,80 @@ +@page "/Overview" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.Overview +@using System.Collections.ObjectModel + +
+
+ + + + + + +
+
+ +
+
+@code { + SfDiagramComponent Diagram; + + private void ConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; + (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6d6d6d" }; + (connector as Connector).Constraints = 0; + (connector as Connector).CornerRadius = 5; + } + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) + { + options.EnableSubTree = true; + options.Orientation = Orientation.Horizontal; + return options; + } + private void NodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data is System.Text.Json.JsonElement) + { + node.Data = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString()); + } + HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails; + node.Style = new ShapeStyle() { Fill = "#659be5", StrokeColor = "none", StrokeWidth = 2, }; + node.BackgroundColor = "#659be5"; + node.Width = 150; + node.Height = 50; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = hierarchicalData.Name, + Style =new TextStyle(){Color = "white"} + } + }; + } + public class HierarchicalDetails + { + public string Name { get; set; } + public string FillColor { get; set; } + public string Category { get; set; } + + } + public List DataSource = new List() + { + new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"} + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Overview/OverviewConstraints.razor b/Diagram/Server/Pages/Overview/OverviewConstraints.razor new file mode 100644 index 0000000..f28c87a --- /dev/null +++ b/Diagram/Server/Pages/Overview/OverviewConstraints.razor @@ -0,0 +1,67 @@ +@page "/OverviewConstraints" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.Overview +@using System.Collections.ObjectModel + +
+
+ + +
+
+ +
+
+ +@code { + SfDiagramComponent diagram; DiagramObjectCollection nodes; DiagramObjectCollection connectors; + protected override void OnInitialized() + { + //Initialize the node and connector collections + nodes = new DiagramObjectCollection(); + connectors = new DiagramObjectCollection(); + Node node1 = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + Node node2 = new Node() + { + ID = "node2", + Height = 100, + Width = 100, + OffsetX = 300, + OffsetY = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; + nodes.Add(node1); nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + Type = ConnectorSegmentType.Straight, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeWidth = 2 + } + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/PageSettings/BoundaryConstraints.razor b/Diagram/Server/Pages/PageSettings/BoundaryConstraints.razor new file mode 100644 index 0000000..2b2a1d7 --- /dev/null +++ b/Diagram/Server/Pages/PageSettings/BoundaryConstraints.razor @@ -0,0 +1,60 @@ +@page "/BoundaryConstraints" + +@using Syncfusion.Blazor.Diagram + + + + + + + @*Initialize the page settings with page orientation and break lines*@ + + + + + + +@code +{ + //Reference to diagram. + SfDiagramComponent diagram; + public PageOrientation orientation = PageOrientation.Landscape; + public BoundaryConstraints boundaryConstraints = BoundaryConstraints.Page; + //Define diagram's nodes collection. + public DiagramObjectCollection + NodeCollection = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "group", + OffsetX = 200, + OffsetY = 200, + Width = 100, + Height = 100, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = "Node1", + Style = new TextStyle() + { + Color = "white", + } + } + }, + Style = new ShapeStyle() + { + Fill = "cornflowerblue", + StrokeColor = "white" + } + }; + NodeCollection.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/PageSettings/Margin.razor b/Diagram/Server/Pages/PageSettings/Margin.razor new file mode 100644 index 0000000..19f96d1 --- /dev/null +++ b/Diagram/Server/Pages/PageSettings/Margin.razor @@ -0,0 +1,14 @@ +@page "/Margin" + +@using Syncfusion.Blazor.Diagram + + + @*Initialize the page settings with page margin*@ + + + + + \ No newline at end of file diff --git a/Diagram/Server/Pages/PageSettings/MultiplePage.razor b/Diagram/Server/Pages/PageSettings/MultiplePage.razor new file mode 100644 index 0000000..66fc832 --- /dev/null +++ b/Diagram/Server/Pages/PageSettings/MultiplePage.razor @@ -0,0 +1,38 @@ +@page "/MultiplePage" + +@using Syncfusion.Blazor.Diagram + + + + @*Initialize the page settings with multiple page, page orientation and break lines*@ + + + + +@code +{ + //Sets the page orientation as landscape. + public PageOrientation orientation = PageOrientation.Landscape; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node6", + Width = 50, + Height = 50, + OffsetX = 200, + OffsetY = 200, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/PageSettings/PageAppearance.razor b/Diagram/Server/Pages/PageSettings/PageAppearance.razor new file mode 100644 index 0000000..59c2c10 --- /dev/null +++ b/Diagram/Server/Pages/PageSettings/PageAppearance.razor @@ -0,0 +1,41 @@ +@page "/PageAppearance" + +@using Syncfusion.Blazor.Diagram + + + + @*Initialize the page settings with page orientation and break lines*@ + + @*Set the page background color*@ + + + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node6", + Width = 50, + Height = 50, + OffsetX = 200, + OffsetY = 200, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + nodes.Add(node); + } + //Set the page orientation as landscape. + public PageOrientation orientation = PageOrientation.Landscape; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/PageSettings/PageBreak.razor b/Diagram/Server/Pages/PageSettings/PageBreak.razor new file mode 100644 index 0000000..9bd6faf --- /dev/null +++ b/Diagram/Server/Pages/PageSettings/PageBreak.razor @@ -0,0 +1,22 @@ +@page "/PageBreak" + +@using Syncfusion.Blazor.Diagram + + + + + + @*Initialize the page settings with page orientation and break lines*@ + + + + \ No newline at end of file diff --git a/Diagram/Server/Pages/PageSettings/PageOrientation.razor b/Diagram/Server/Pages/PageSettings/PageOrientation.razor new file mode 100644 index 0000000..4d84a4b --- /dev/null +++ b/Diagram/Server/Pages/PageSettings/PageOrientation.razor @@ -0,0 +1,32 @@ +@page "/PageOrientation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Dictionary NodeInfo = new Dictionary(); + NodeInfo.Add("nodeInfo", "Central Node"); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + AdditionalInfo = NodeInfo + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/PageSettings/ResponsiveWithParentContainer.razor b/Diagram/Server/Pages/PageSettings/ResponsiveWithParentContainer.razor new file mode 100644 index 0000000..cb37108 --- /dev/null +++ b/Diagram/Server/Pages/PageSettings/ResponsiveWithParentContainer.razor @@ -0,0 +1,26 @@ +@page "/ResponsiveWithParentContainer" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +
+ +
+@code +{ + //Initialize the diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Reference the diagram + SfDiagramComponent diagram; + protected override void OnInitialized() + { + nodes.Add(new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/ActionofPorts/AddMultiplePorts.razor b/Diagram/Server/Pages/Ports/ActionofPorts/AddMultiplePorts.razor new file mode 100644 index 0000000..7fd64d6 --- /dev/null +++ b/Diagram/Server/Pages/Ports/ActionofPorts/AddMultiplePorts.razor @@ -0,0 +1,43 @@ +@page "/AddMultiplePorts" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //A node is created and stored in nodes array + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + //Position of the node + OffsetX = 250, + OffsetY = 250, + //Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } + //Method to add ports at runtime. + public void AddPorts() + { + PointPort port1 = new PointPort() { ID = "port1", Offset = new DiagramPoint() { X = 0, Y = 0.5 }, Visibility = PortVisibility.Visible, Style = new ShapeStyle() { Fill = "gray" } }; + PointPort port2 = new PointPort() { ID = "port2", Offset = new DiagramPoint() { X = 1, Y = 0.5 }, Visibility = PortVisibility.Visible, Style = new ShapeStyle() { Fill = "gray" } }; + PointPort port3 = new PointPort() { ID = "port3", Offset = new DiagramPoint() { X = 0.5, Y = 0 }, Visibility = PortVisibility.Visible, Style = new ShapeStyle() { Fill = "gray" } }; + PointPort port4 = new PointPort() { ID = "port4", Offset = new DiagramPoint() { X = 0.5, Y = 1 }, Visibility = PortVisibility.Visible, Style = new ShapeStyle() { Fill = "gray" } }; + // Initialize port collection + nodes[0].Ports.Add(port1); + nodes[0].Ports.Add(port2); + nodes[0].Ports.Add(port3); + nodes[0].Ports.Add(port4); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/ActionofPorts/AddPort.razor b/Diagram/Server/Pages/Ports/ActionofPorts/AddPort.razor new file mode 100644 index 0000000..704facd --- /dev/null +++ b/Diagram/Server/Pages/Ports/ActionofPorts/AddPort.razor @@ -0,0 +1,43 @@ +@page "/AddPort" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //A node is created and stored in nodes array. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + //Position of the node. + OffsetX = 250, + OffsetY = 250, + //Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } + + public void AddPorts() + { + PointPort port = new PointPort() + { + ID = "port", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + Visibility = PortVisibility.Visible + }; + // Initialize port collection. + nodes[0].Ports.Add(port); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/ActionofPorts/AddPortsAsync.razor b/Diagram/Server/Pages/Ports/ActionofPorts/AddPortsAsync.razor new file mode 100644 index 0000000..2262f64 --- /dev/null +++ b/Diagram/Server/Pages/Ports/ActionofPorts/AddPortsAsync.razor @@ -0,0 +1,40 @@ +@page "/AddPortsAsync" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + +@code +{ + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //A node is created and stored in nodes array. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + //Position of the node. + OffsetX = 250, + OffsetY = 250, + //Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + }; + nodes.Add(node); + } + + public async void AddPorts() + { + PointPort port = new PointPort() + { + Style = new ShapeStyle() { Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + Visibility = PortVisibility.Visible + }; + await ((nodes[0].Ports) as DiagramObjectCollection).AddAsync(port); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/ActionofPorts/CreatePorts.razor b/Diagram/Server/Pages/Ports/ActionofPorts/CreatePorts.razor new file mode 100644 index 0000000..bf01628 --- /dev/null +++ b/Diagram/Server/Pages/Ports/ActionofPorts/CreatePorts.razor @@ -0,0 +1,34 @@ +@page "/" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // A node is created and stored in nodes collection. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Initialize port collection + Ports = new DiagramObjectCollection() + { + // Sets the position for the port + new PointPort(){Style=new ShapeStyle(){ Fill="gray" }, Offset= new DiagramPoint(){X=0.5,Y=0.5}, Visibility = PortVisibility.Visible} + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/_Host.cshtml b/Diagram/Server/Pages/_Host.cshtml new file mode 100644 index 0000000..4c116b3 --- /dev/null +++ b/Diagram/Server/Pages/_Host.cshtml @@ -0,0 +1,8 @@ +@page "/" +@namespace AlignBottom.Pages +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers +@{ + Layout = "_Layout"; +} + + diff --git a/Diagram/Server/Pages/_Layout.cshtml b/Diagram/Server/Pages/_Layout.cshtml new file mode 100644 index 0000000..ef8978a --- /dev/null +++ b/Diagram/Server/Pages/_Layout.cshtml @@ -0,0 +1,24 @@ +@using Microsoft.AspNetCore.Components.Web +@namespace AlignBottom.Pages +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers + + + + + + + + + + + + + + + @RenderBody() + + + + + + diff --git a/Diagram/Server/Program.cs b/Diagram/Server/Program.cs new file mode 100644 index 0000000..50fb6ff --- /dev/null +++ b/Diagram/Server/Program.cs @@ -0,0 +1,32 @@ + +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; +using Syncfusion.Blazor; + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorPages(); +builder.Services.AddServerSideBlazor(); +builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); + +// Configure the HTTP request pipeline. +if (!app.Environment.IsDevelopment()) +{ + app.UseExceptionHandler("/Error"); + // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. + app.UseHsts(); +} + +app.UseHttpsRedirection(); + +app.UseStaticFiles(); + +app.UseRouting(); + +app.MapBlazorHub(); +app.MapFallbackToPage("/_Host"); + +app.Run(); diff --git a/Diagram/Server/Properties/launchSettings.json b/Diagram/Server/Properties/launchSettings.json new file mode 100644 index 0000000..46b8494 --- /dev/null +++ b/Diagram/Server/Properties/launchSettings.json @@ -0,0 +1,28 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:11920", + "sslPort": 44341 + } + }, + "profiles": { + "BlazorApp36": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "applicationUrl": "https://localhost:7204;http://localhost:5236", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + } + } +} diff --git a/Diagram/Server/Server_NET8.csproj b/Diagram/Server/Server_NET8.csproj new file mode 100644 index 0000000..07f3a73 --- /dev/null +++ b/Diagram/Server/Server_NET8.csproj @@ -0,0 +1,15 @@ + + + + net8.0 + enable + enable + + + + + + + + + \ No newline at end of file diff --git a/Diagram/Server/Server_NET9.csproj b/Diagram/Server/Server_NET9.csproj new file mode 100644 index 0000000..4876429 --- /dev/null +++ b/Diagram/Server/Server_NET9.csproj @@ -0,0 +1,15 @@ + + + + net9.0 + enable + enable + + + + + + + + + \ No newline at end of file diff --git a/Diagram/Server/Shared/MainLayout.razor b/Diagram/Server/Shared/MainLayout.razor new file mode 100644 index 0000000..67ac245 --- /dev/null +++ b/Diagram/Server/Shared/MainLayout.razor @@ -0,0 +1,17 @@ +@namespace AlignBottom.Shared +@inherits LayoutComponentBase + +AlignBottom + +
+
+
+ + +
+ +
+ @Body +
+
+
diff --git a/Diagram/Server/Shared/MainLayout.razor.css b/Diagram/Server/Shared/MainLayout.razor.css new file mode 100644 index 0000000..551e4b2 --- /dev/null +++ b/Diagram/Server/Shared/MainLayout.razor.css @@ -0,0 +1,70 @@ +.page { + position: relative; + display: flex; + flex-direction: column; +} + +main { + flex: 1; +} + +.sidebar { + background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); +} + +.top-row { + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; + height: 3.5rem; + display: flex; + align-items: center; +} + + .top-row ::deep a, .top-row .btn-link { + white-space: nowrap; + margin-left: 1.5rem; + } + + .top-row a:first-child { + overflow: hidden; + text-overflow: ellipsis; + } + +@media (max-width: 640.98px) { + .top-row:not(.auth) { + display: none; + } + + .top-row.auth { + justify-content: space-between; + } + + .top-row a, .top-row .btn-link { + margin-left: 0; + } +} + +@media (min-width: 641px) { + .page { + flex-direction: row; + } + + .sidebar { + width: 250px; + height: 100vh; + position: sticky; + top: 0; + } + + .top-row { + position: sticky; + top: 0; + z-index: 1; + } + + .top-row, article { + padding-left: 2rem !important; + padding-right: 1.5rem !important; + } +} diff --git a/Diagram/Server/_Imports.razor b/Diagram/Server/_Imports.razor new file mode 100644 index 0000000..5a117c2 --- /dev/null +++ b/Diagram/Server/_Imports.razor @@ -0,0 +1,10 @@ +@using System.Net.Http +@using Microsoft.AspNetCore.Authorization +@using Microsoft.AspNetCore.Components.Authorization +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Components.Web.Virtualization +@using Microsoft.JSInterop +@using AlignBottom +@using AlignBottom.Shared diff --git a/Diagram/Server/appsettings.Development.json b/Diagram/Server/appsettings.Development.json new file mode 100644 index 0000000..770d3e9 --- /dev/null +++ b/Diagram/Server/appsettings.Development.json @@ -0,0 +1,9 @@ +{ + "DetailedErrors": true, + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + } +} diff --git a/Diagram/Server/appsettings.json b/Diagram/Server/appsettings.json new file mode 100644 index 0000000..10f68b8 --- /dev/null +++ b/Diagram/Server/appsettings.json @@ -0,0 +1,9 @@ +{ + "Logging": { + "LogLevel": { + "Default": "Information", + "Microsoft.AspNetCore": "Warning" + } + }, + "AllowedHosts": "*" +} diff --git a/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css b/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css new file mode 100644 index 0000000..02ae65b --- /dev/null +++ b/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css @@ -0,0 +1,7 @@ +@charset "UTF-8";/*! + * Bootstrap v5.1.0 (https://getbootstrap.com/) + * Copyright 2011-2021 The Bootstrap Authors + * Copyright 2011-2021 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-rgb:33,37,41;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:calc(1.625rem + 4.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-1{font-size:5rem}}.display-2{font-size:calc(1.575rem + 3.9vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-2{font-size:4.5rem}}.display-3{font-size:calc(1.525rem + 3.3vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-3{font-size:4rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.display-5{font-size:calc(1.425rem + 2.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-5{font-size:3rem}}.display-6{font-size:calc(1.375rem + 1.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-6{font-size:2.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:.875em;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.blockquote-footer{margin-top:-1rem;margin-bottom:1rem;font-size:.875em;color:#6c757d}.blockquote-footer::before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:.875em;color:#6c757d}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x) * -.5);margin-left:calc(var(--bs-gutter-x) * -.5)}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.table{--bs-table-bg:transparent;--bs-table-accent-bg:transparent;--bs-table-striped-color:#212529;--bs-table-striped-bg:rgba(0, 0, 0, 0.05);--bs-table-active-color:#212529;--bs-table-active-bg:rgba(0, 0, 0, 0.1);--bs-table-hover-color:#212529;--bs-table-hover-bg:rgba(0, 0, 0, 0.075);width:100%;margin-bottom:1rem;color:#212529;vertical-align:top;border-color:#dee2e6}.table>:not(caption)>*>*{padding:.5rem .5rem;background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:last-child)>:last-child>*{border-bottom-color:currentColor}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:1px 0}.table-bordered>:not(caption)>*>*{border-width:0 1px}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-striped>tbody>tr:nth-of-type(odd){--bs-table-accent-bg:var(--bs-table-striped-bg);color:var(--bs-table-striped-color)}.table-active{--bs-table-accent-bg:var(--bs-table-active-bg);color:var(--bs-table-active-color)}.table-hover>tbody>tr:hover{--bs-table-accent-bg:var(--bs-table-hover-bg);color:var(--bs-table-hover-color)}.table-primary{--bs-table-bg:#cfe2ff;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000;color:#000;border-color:#bacbe6}.table-secondary{--bs-table-bg:#e2e3e5;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000;color:#000;border-color:#cbccce}.table-success{--bs-table-bg:#d1e7dd;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000;color:#000;border-color:#bcd0c7}.table-info{--bs-table-bg:#cff4fc;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000;color:#000;border-color:#badce3}.table-warning{--bs-table-bg:#fff3cd;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000;color:#000;border-color:#e6dbb9}.table-danger{--bs-table-bg:#f8d7da;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000;color:#000;border-color:#dfc2c4}.table-light{--bs-table-bg:#f8f9fa;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000;color:#000;border-color:#dfe0e1}.table-dark{--bs-table-bg:#212529;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff;color:#fff;border-color:#373b3e}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width:575.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:991.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1199.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1399.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.form-label{margin-bottom:.5rem}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem + 1px);font-size:.875rem}.form-text{margin-top:.25rem;font-size:.875em;color:#6c757d}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{height:1.5em}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#dde0e3}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#dde0e3}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.5;color:#212529;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.5em + .5rem + 2px);padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-lg{min-height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.form-control-lg::file-selector-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.form-control-lg::-webkit-file-upload-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}textarea.form-control{min-height:calc(1.5em + .75rem + 2px)}textarea.form-control-sm{min-height:calc(1.5em + .5rem + 2px)}textarea.form-control-lg{min-height:calc(1.5em + 1rem + 2px)}.form-control-color{width:3rem;height:auto;padding:.375rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{height:1.5em;border-radius:.25rem}.form-control-color::-webkit-color-swatch{height:1.5em;border-radius:.25rem}.form-select{display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;-moz-padding-start:calc(0.75rem - 3px);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-select{transition:none}}.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}.form-select:disabled{background-color:#e9ecef}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #212529}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem}.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-input{width:1em;height:1em;margin-top:.25em;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgba(0,0,0,.25);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{width:2em;margin-left:-2.5em;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.form-check-inline{display:inline-block;margin-right:1rem}.btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn-check:disabled+.btn,.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}.form-range{width:100%;height:1.5rem;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;background-color:#0d6efd;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#b6d4fe}.form-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#0d6efd;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#b6d4fe}.form-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#adb5bd}.form-range:disabled::-moz-range-thumb{background-color:#adb5bd}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-select{height:calc(3.5rem + 2px);line-height:1.25}.form-floating>label{position:absolute;top:0;left:0;height:100%;padding:1rem .75rem;pointer-events:none;border:1px solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}}.form-floating>.form-control{padding:1rem .75rem}.form-floating>.form-control::-moz-placeholder{color:transparent}.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:not(:-moz-placeholder-shown)~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:-webkit-autofill~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-select:focus{z-index:3}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:3}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:.25rem}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#198754}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:rgba(25,135,84,.9);border-radius:.25rem}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#198754;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:#198754}.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{padding-right:4.125rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:#198754}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:#198754}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#198754}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.input-group .form-control.is-valid,.input-group .form-select.is-valid,.was-validated .input-group .form-control:valid,.was-validated .input-group .form-select:valid{z-index:1}.input-group .form-control.is-valid:focus,.input-group .form-select.is-valid:focus,.was-validated .input-group .form-control:valid:focus,.was-validated .input-group .form-select:valid:focus{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:rgba(220,53,69,.9);border-radius:.25rem}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#dc3545;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:#dc3545}.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{padding-right:4.125rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#dc3545}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:#dc3545}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.input-group .form-control.is-invalid,.input-group .form-select.is-invalid,.was-validated .input-group .form-control:invalid,.was-validated .input-group .form-select:invalid{z-index:2}.input-group .form-control.is-invalid:focus,.input-group .form-select.is-invalid:focus,.was-validated .input-group .form-control:invalid:focus,.was-validated .input-group .form-select:invalid:focus{z-index:3}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529}.btn-check:focus+.btn,.btn:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-primary:hover{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}.btn-check:focus+.btn-primary,.btn-primary:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca;box-shadow:0 0 0 .25rem rgba(49,132,253,.5)}.btn-check:active+.btn-primary,.btn-check:checked+.btn-primary,.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0a58ca;border-color:#0a53be}.btn-check:active+.btn-primary:focus,.btn-check:checked+.btn-primary:focus,.btn-primary.active:focus,.btn-primary:active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(49,132,253,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5c636a;border-color:#565e64}.btn-check:focus+.btn-secondary,.btn-secondary:focus{color:#fff;background-color:#5c636a;border-color:#565e64;box-shadow:0 0 0 .25rem rgba(130,138,145,.5)}.btn-check:active+.btn-secondary,.btn-check:checked+.btn-secondary,.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#565e64;border-color:#51585e}.btn-check:active+.btn-secondary:focus,.btn-check:checked+.btn-secondary:focus,.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(130,138,145,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-success{color:#fff;background-color:#198754;border-color:#198754}.btn-success:hover{color:#fff;background-color:#157347;border-color:#146c43}.btn-check:focus+.btn-success,.btn-success:focus{color:#fff;background-color:#157347;border-color:#146c43;box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.btn-check:active+.btn-success,.btn-check:checked+.btn-success,.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#146c43;border-color:#13653f}.btn-check:active+.btn-success:focus,.btn-check:checked+.btn-success:focus,.btn-success.active:focus,.btn-success:active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#198754;border-color:#198754}.btn-info{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-info:hover{color:#000;background-color:#31d2f2;border-color:#25cff2}.btn-check:focus+.btn-info,.btn-info:focus{color:#000;background-color:#31d2f2;border-color:#25cff2;box-shadow:0 0 0 .25rem rgba(11,172,204,.5)}.btn-check:active+.btn-info,.btn-check:checked+.btn-info,.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{color:#000;background-color:#3dd5f3;border-color:#25cff2}.btn-check:active+.btn-info:focus,.btn-check:checked+.btn-info:focus,.btn-info.active:focus,.btn-info:active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(11,172,204,.5)}.btn-info.disabled,.btn-info:disabled{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-warning{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#000;background-color:#ffca2c;border-color:#ffc720}.btn-check:focus+.btn-warning,.btn-warning:focus{color:#000;background-color:#ffca2c;border-color:#ffc720;box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-check:active+.btn-warning,.btn-check:checked+.btn-warning,.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:#000;background-color:#ffcd39;border-color:#ffc720}.btn-check:active+.btn-warning:focus,.btn-check:checked+.btn-warning:focus,.btn-warning.active:focus,.btn-warning:active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#bb2d3b;border-color:#b02a37}.btn-check:focus+.btn-danger,.btn-danger:focus{color:#fff;background-color:#bb2d3b;border-color:#b02a37;box-shadow:0 0 0 .25rem rgba(225,83,97,.5)}.btn-check:active+.btn-danger,.btn-check:checked+.btn-danger,.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#b02a37;border-color:#a52834}.btn-check:active+.btn-danger:focus,.btn-check:checked+.btn-danger:focus,.btn-danger.active:focus,.btn-danger:active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(225,83,97,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-light{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#000;background-color:#f9fafb;border-color:#f9fafb}.btn-check:focus+.btn-light,.btn-light:focus{color:#000;background-color:#f9fafb;border-color:#f9fafb;box-shadow:0 0 0 .25rem rgba(211,212,213,.5)}.btn-check:active+.btn-light,.btn-check:checked+.btn-light,.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{color:#000;background-color:#f9fafb;border-color:#f9fafb}.btn-check:active+.btn-light:focus,.btn-check:checked+.btn-light:focus,.btn-light.active:focus,.btn-light:active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(211,212,213,.5)}.btn-light.disabled,.btn-light:disabled{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-dark{color:#fff;background-color:#212529;border-color:#212529}.btn-dark:hover{color:#fff;background-color:#1c1f23;border-color:#1a1e21}.btn-check:focus+.btn-dark,.btn-dark:focus{color:#fff;background-color:#1c1f23;border-color:#1a1e21;box-shadow:0 0 0 .25rem rgba(66,70,73,.5)}.btn-check:active+.btn-dark,.btn-check:checked+.btn-dark,.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1a1e21;border-color:#191c1f}.btn-check:active+.btn-dark:focus,.btn-check:checked+.btn-dark:focus,.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(66,70,73,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#212529;border-color:#212529}.btn-outline-primary{color:#0d6efd;border-color:#0d6efd}.btn-outline-primary:hover{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-check:focus+.btn-outline-primary,.btn-outline-primary:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.5)}.btn-check:active+.btn-outline-primary,.btn-check:checked+.btn-outline-primary,.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show,.btn-outline-primary:active{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-check:active+.btn-outline-primary:focus,.btn-check:checked+.btn-outline-primary:focus,.btn-outline-primary.active:focus,.btn-outline-primary.dropdown-toggle.show:focus,.btn-outline-primary:active:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#0d6efd;background-color:transparent}.btn-outline-secondary{color:#6c757d;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-check:focus+.btn-outline-secondary,.btn-outline-secondary:focus{box-shadow:0 0 0 .25rem rgba(108,117,125,.5)}.btn-check:active+.btn-outline-secondary,.btn-check:checked+.btn-outline-secondary,.btn-outline-secondary.active,.btn-outline-secondary.dropdown-toggle.show,.btn-outline-secondary:active{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-check:active+.btn-outline-secondary:focus,.btn-check:checked+.btn-outline-secondary:focus,.btn-outline-secondary.active:focus,.btn-outline-secondary.dropdown-toggle.show:focus,.btn-outline-secondary:active:focus{box-shadow:0 0 0 .25rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-success{color:#198754;border-color:#198754}.btn-outline-success:hover{color:#fff;background-color:#198754;border-color:#198754}.btn-check:focus+.btn-outline-success,.btn-outline-success:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.5)}.btn-check:active+.btn-outline-success,.btn-check:checked+.btn-outline-success,.btn-outline-success.active,.btn-outline-success.dropdown-toggle.show,.btn-outline-success:active{color:#fff;background-color:#198754;border-color:#198754}.btn-check:active+.btn-outline-success:focus,.btn-check:checked+.btn-outline-success:focus,.btn-outline-success.active:focus,.btn-outline-success.dropdown-toggle.show:focus,.btn-outline-success:active:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#198754;background-color:transparent}.btn-outline-info{color:#0dcaf0;border-color:#0dcaf0}.btn-outline-info:hover{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-check:focus+.btn-outline-info,.btn-outline-info:focus{box-shadow:0 0 0 .25rem rgba(13,202,240,.5)}.btn-check:active+.btn-outline-info,.btn-check:checked+.btn-outline-info,.btn-outline-info.active,.btn-outline-info.dropdown-toggle.show,.btn-outline-info:active{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-check:active+.btn-outline-info:focus,.btn-check:checked+.btn-outline-info:focus,.btn-outline-info.active:focus,.btn-outline-info.dropdown-toggle.show:focus,.btn-outline-info:active:focus{box-shadow:0 0 0 .25rem rgba(13,202,240,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#0dcaf0;background-color:transparent}.btn-outline-warning{color:#ffc107;border-color:#ffc107}.btn-outline-warning:hover{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-check:focus+.btn-outline-warning,.btn-outline-warning:focus{box-shadow:0 0 0 .25rem rgba(255,193,7,.5)}.btn-check:active+.btn-outline-warning,.btn-check:checked+.btn-outline-warning,.btn-outline-warning.active,.btn-outline-warning.dropdown-toggle.show,.btn-outline-warning:active{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-check:active+.btn-outline-warning:focus,.btn-check:checked+.btn-outline-warning:focus,.btn-outline-warning.active:focus,.btn-outline-warning.dropdown-toggle.show:focus,.btn-outline-warning:active:focus{box-shadow:0 0 0 .25rem rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-check:focus+.btn-outline-danger,.btn-outline-danger:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-check:active+.btn-outline-danger,.btn-check:checked+.btn-outline-danger,.btn-outline-danger.active,.btn-outline-danger.dropdown-toggle.show,.btn-outline-danger:active{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-check:active+.btn-outline-danger:focus,.btn-check:checked+.btn-outline-danger:focus,.btn-outline-danger.active:focus,.btn-outline-danger.dropdown-toggle.show:focus,.btn-outline-danger:active:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:hover{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-check:focus+.btn-outline-light,.btn-outline-light:focus{box-shadow:0 0 0 .25rem rgba(248,249,250,.5)}.btn-check:active+.btn-outline-light,.btn-check:checked+.btn-outline-light,.btn-outline-light.active,.btn-outline-light.dropdown-toggle.show,.btn-outline-light:active{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-check:active+.btn-outline-light:focus,.btn-check:checked+.btn-outline-light:focus,.btn-outline-light.active:focus,.btn-outline-light.dropdown-toggle.show:focus,.btn-outline-light:active:focus{box-shadow:0 0 0 .25rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-dark{color:#212529;border-color:#212529}.btn-outline-dark:hover{color:#fff;background-color:#212529;border-color:#212529}.btn-check:focus+.btn-outline-dark,.btn-outline-dark:focus{box-shadow:0 0 0 .25rem rgba(33,37,41,.5)}.btn-check:active+.btn-outline-dark,.btn-check:checked+.btn-outline-dark,.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#212529;border-color:#212529}.btn-check:active+.btn-outline-dark:focus,.btn-check:checked+.btn-outline-dark:focus,.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .25rem rgba(33,37,41,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#212529;background-color:transparent}.btn-link{font-weight:400;color:#0d6efd;text-decoration:underline}.btn-link:hover{color:#0a58ca}.btn-link.disabled,.btn-link:disabled{color:#6c757d}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown,.dropend,.dropstart,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;z-index:1000;display:none;min-width:10rem;padding:.5rem 0;margin:0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:.125rem}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid rgba(0,0,0,.15)}.dropdown-item{display:block;width:100%;padding:.25rem 1rem;clear:both;font-weight:400;color:#212529;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#1e2125;background-color:#e9ecef}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#0d6efd}.dropdown-item.disabled,.dropdown-item:disabled{color:#adb5bd;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1rem;color:#212529}.dropdown-menu-dark{color:#dee2e6;background-color:#343a40;border-color:rgba(0,0,0,.15)}.dropdown-menu-dark .dropdown-item{color:#dee2e6}.dropdown-menu-dark .dropdown-item:focus,.dropdown-menu-dark .dropdown-item:hover{color:#fff;background-color:rgba(255,255,255,.15)}.dropdown-menu-dark .dropdown-item.active,.dropdown-menu-dark .dropdown-item:active{color:#fff;background-color:#0d6efd}.dropdown-menu-dark .dropdown-item.disabled,.dropdown-menu-dark .dropdown-item:disabled{color:#adb5bd}.dropdown-menu-dark .dropdown-divider{border-color:rgba(0,0,0,.15)}.dropdown-menu-dark .dropdown-item-text{color:#dee2e6}.dropdown-menu-dark .dropdown-header{color:#adb5bd}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child){margin-left:-1px}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn~.btn{border-top-left-radius:0;border-top-right-radius:0}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem;color:#0d6efd;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:#0a58ca}.nav-link.disabled{color:#6c757d;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-link{margin-bottom:-1px;background:0 0;border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #dee2e6;isolation:isolate}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{background:0 0;border:0;border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#0d6efd}.nav-fill .nav-item,.nav-fill>.nav-link{flex:1 1 auto;text-align:center}.nav-justified .nav-item,.nav-justified>.nav-link{flex-basis:0;flex-grow:1;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;text-decoration:none;white-space:nowrap}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem;transition:box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 .25rem}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:100%}.navbar-nav-scroll{max-height:var(--bs-scroll-height,75vh);overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}.navbar-expand-sm .offcanvas-header{display:none}.navbar-expand-sm .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand-sm .offcanvas-bottom,.navbar-expand-sm .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand-sm .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}.navbar-expand-md .offcanvas-header{display:none}.navbar-expand-md .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand-md .offcanvas-bottom,.navbar-expand-md .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand-md .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .offcanvas-header{display:none}.navbar-expand-lg .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand-lg .offcanvas-bottom,.navbar-expand-lg .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand-lg .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .offcanvas-header{display:none}.navbar-expand-xl .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand-xl .offcanvas-bottom,.navbar-expand-xl .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand-xl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}.navbar-expand-xxl .offcanvas-header{display:none}.navbar-expand-xxl .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand-xxl .offcanvas-bottom,.navbar-expand-xxl .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand-xxl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-expand .offcanvas-header{display:none}.navbar-expand .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand .offcanvas-bottom,.navbar-expand .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.55)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.55);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-light .navbar-text{color:rgba(0,0,0,.55)}.navbar-light .navbar-text a,.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.55)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-dark .navbar-text{color:rgba(255,255,255,.55)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:1rem 1rem}.card-title{margin-bottom:.5rem}.card-subtitle{margin-top:-.25rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:1rem}.card-header{padding:.5rem 1rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-footer{padding:.5rem 1rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-right:-.5rem;margin-bottom:-.5rem;margin-left:-.5rem;border-bottom:0}.card-header-pills{margin-right:-.5rem;margin-left:-.5rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1rem;border-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-group>.card{margin-bottom:.75rem}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:1rem 1.25rem;font-size:1rem;color:#212529;text-align:left;background-color:#fff;border:0;border-radius:0;overflow-anchor:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:#0c63e4;background-color:#e7f1ff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.125)}.accordion-button:not(.collapsed)::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");transform:rotate(-180deg)}.accordion-button::after{flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;content:"";background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:1.25rem;transition:transform .2s ease-in-out}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.accordion-header{margin-bottom:0}.accordion-item{background-color:#fff;border:1px solid rgba(0,0,0,.125)}.accordion-item:first-of-type{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.accordion-item:first-of-type .accordion-button{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.accordion-item:last-of-type .accordion-button.collapsed{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.accordion-item:last-of-type .accordion-collapse{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.accordion-body{padding:1rem 1.25rem}.accordion-flush .accordion-collapse{border-width:0}.accordion-flush .accordion-item{border-right:0;border-left:0;border-radius:0}.accordion-flush .accordion-item:first-child{border-top:0}.accordion-flush .accordion-item:last-child{border-bottom:0}.accordion-flush .accordion-item .accordion-button{border-radius:0}.breadcrumb{display:flex;flex-wrap:wrap;padding:0 0;margin-bottom:1rem;list-style:none}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;color:#6c757d;content:var(--bs-breadcrumb-divider, "/")}.breadcrumb-item.active{color:#6c757d}.pagination{display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;color:#0d6efd;text-decoration:none;background-color:#fff;border:1px solid #dee2e6;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:#0a58ca;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:3;color:#0a58ca;background-color:#e9ecef;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.page-item:not(:first-child) .page-link{margin-left:-1px}.page-item.active .page-link{z-index:3;color:#fff;background-color:#0d6efd;border-color:#0d6efd}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;background-color:#fff;border-color:#dee2e6}.page-link{padding:.375rem .75rem}.page-item:first-child .page-link{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}.alert-primary{color:#084298;background-color:#cfe2ff;border-color:#b6d4fe}.alert-primary .alert-link{color:#06357a}.alert-secondary{color:#41464b;background-color:#e2e3e5;border-color:#d3d6d8}.alert-secondary .alert-link{color:#34383c}.alert-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert-success .alert-link{color:#0c4128}.alert-info{color:#055160;background-color:#cff4fc;border-color:#b6effb}.alert-info .alert-link{color:#04414d}.alert-warning{color:#664d03;background-color:#fff3cd;border-color:#ffecb5}.alert-warning .alert-link{color:#523e02}.alert-danger{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}.alert-danger .alert-link{color:#6a1a21}.alert-light{color:#636464;background-color:#fefefe;border-color:#fdfdfe}.alert-light .alert-link{color:#4f5050}.alert-dark{color:#141619;background-color:#d3d3d4;border-color:#bcbebf}.alert-dark .alert-link{color:#101214}@-webkit-keyframes progress-bar-stripes{0%{background-position-x:1rem}}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress{display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#0d6efd;transition:width .6s ease}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{-webkit-animation:1s linear infinite progress-bar-stripes;animation:1s linear infinite progress-bar-stripes}@media (prefers-reduced-motion:reduce){.progress-bar-animated{-webkit-animation:none;animation:none}}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:.25rem}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>li::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.5rem 1rem;color:#212529;text-decoration:none;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;pointer-events:none;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#0d6efd;border-color:#0d6efd}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:-1px;border-top-width:1px}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}@media (min-width:576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:1400px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 1px}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{color:#084298;background-color:#cfe2ff}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#084298;background-color:#bacbe6}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#084298;border-color:#084298}.list-group-item-secondary{color:#41464b;background-color:#e2e3e5}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#41464b;background-color:#cbccce}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#41464b;border-color:#41464b}.list-group-item-success{color:#0f5132;background-color:#d1e7dd}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#0f5132;background-color:#bcd0c7}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#0f5132;border-color:#0f5132}.list-group-item-info{color:#055160;background-color:#cff4fc}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#055160;background-color:#badce3}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#055160;border-color:#055160}.list-group-item-warning{color:#664d03;background-color:#fff3cd}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#664d03;background-color:#e6dbb9}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#664d03;border-color:#664d03}.list-group-item-danger{color:#842029;background-color:#f8d7da}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#842029;background-color:#dfc2c4}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#842029;border-color:#842029}.list-group-item-light{color:#636464;background-color:#fefefe}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#636464;background-color:#e5e5e5}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#636464;border-color:#636464}.list-group-item-dark{color:#141619;background-color:#d3d3d4}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#141619;background-color:#bebebf}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#141619;border-color:#141619}.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5}.btn-close:hover{color:#000;text-decoration:none;opacity:.75}.btn-close:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);opacity:1}.btn-close.disabled,.btn-close:disabled{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.25}.btn-close-white{filter:invert(1) grayscale(100%) brightness(200%)}.toast{width:350px;max-width:100%;font-size:.875rem;pointer-events:auto;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);border-radius:.25rem}.toast.showing{opacity:0}.toast:not(.show){display:none}.toast-container{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;pointer-events:none}.toast-container>:not(:last-child){margin-bottom:.75rem}.toast-header{display:flex;align-items:center;padding:.5rem .75rem;color:#6c757d;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05);border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.toast-header .btn-close{margin-right:-.375rem;margin-left:.75rem}.toast-body{padding:.75rem;word-wrap:break-word}.modal{position:fixed;top:0;left:0;z-index:1055;display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1050;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.modal-header .btn-close{padding:.5rem .5rem;margin:-.5rem -.5rem -.5rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;flex:1 1 auto;padding:1rem}.modal-footer{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:1px solid #dee2e6;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px)}.modal-footer>*{margin:.25rem}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{height:calc(100% - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{max-width:800px}}@media (min-width:1200px){.modal-xl{max-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}.modal-fullscreen .modal-footer{border-radius:0}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}.modal-fullscreen-sm-down .modal-footer{border-radius:0}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}.modal-fullscreen-md-down .modal-footer{border-radius:0}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}.modal-fullscreen-lg-down .modal-footer{border-radius:0}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}.modal-fullscreen-xl-down .modal-footer{border-radius:0}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}.modal-fullscreen-xxl-down .modal-footer{border-radius:0}}.tooltip{position:absolute;z-index:1080;display:block;margin:0;font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .tooltip-arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[data-popper-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:0}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:-1px;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[data-popper-placement^=right],.bs-tooltip-end{padding:0 .4rem}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,.bs-tooltip-end .tooltip-arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,.bs-tooltip-end .tooltip-arrow::before{right:-1px;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[data-popper-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:0}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:-1px;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[data-popper-placement^=left],.bs-tooltip-start{padding:0 .4rem}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,.bs-tooltip-start .tooltip-arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,.bs-tooltip-start .tooltip-arrow::before{left:-1px;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1070;display:block;max-width:276px;font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .popover-arrow{position:absolute;display:block;width:1rem;height:.5rem}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-.5rem - 1px)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,.bs-popover-end>.popover-arrow{left:calc(-.5rem - 1px);width:.5rem;height:1rem}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-end>.popover-arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-.5rem - 1px)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f0f0f0}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,.bs-popover-start>.popover-arrow{right:calc(-.5rem - 1px);width:.5rem;height:1rem}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-start>.popover-arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem 1rem;margin-bottom:0;font-size:1rem;background-color:#f0f0f0;border-bottom:1px solid rgba(0,0,0,.2);border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:1rem 1rem;color:#212529}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}.carousel-dark .carousel-control-next-icon,.carousel-dark .carousel-control-prev-icon{filter:invert(1) grayscale(100)}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}.carousel-dark .carousel-caption{color:#000}@-webkit-keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;border:.25em solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:.75s linear infinite spinner-border;animation:.75s linear infinite spinner-border}.spinner-border-sm{width:1rem;height:1rem;border-width:.2em}@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;background-color:currentColor;border-radius:50%;opacity:0;-webkit-animation:.75s linear infinite spinner-grow;animation:.75s linear infinite spinner-grow}.spinner-grow-sm{width:1rem;height:1rem}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{-webkit-animation-duration:1.5s;animation-duration:1.5s}}.offcanvas{position:fixed;bottom:0;z-index:1045;display:flex;flex-direction:column;max-width:100%;visibility:hidden;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.fade{opacity:0}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem}.offcanvas-header .btn-close{padding:.5rem .5rem;margin-top:-.5rem;margin-right:-.5rem;margin-bottom:-.5rem}.offcanvas-title{margin-bottom:0;line-height:1.5}.offcanvas-body{flex-grow:1;padding:1rem 1rem;overflow-y:auto}.offcanvas-start{top:0;left:0;width:400px;border-right:1px solid rgba(0,0,0,.2);transform:translateX(-100%)}.offcanvas-end{top:0;right:0;width:400px;border-left:1px solid rgba(0,0,0,.2);transform:translateX(100%)}.offcanvas-top{top:0;right:0;left:0;height:30vh;max-height:100%;border-bottom:1px solid rgba(0,0,0,.2);transform:translateY(-100%)}.offcanvas-bottom{right:0;left:0;height:30vh;max-height:100%;border-top:1px solid rgba(0,0,0,.2);transform:translateY(100%)}.offcanvas.show{transform:none}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentColor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.2em}.placeholder-glow .placeholder{-webkit-animation:placeholder-glow 2s ease-in-out infinite;animation:placeholder-glow 2s ease-in-out infinite}@-webkit-keyframes placeholder-glow{50%{opacity:.2}}@keyframes placeholder-glow{50%{opacity:.2}}.placeholder-wave{-webkit-mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);-webkit-mask-size:200% 100%;mask-size:200% 100%;-webkit-animation:placeholder-wave 2s linear infinite;animation:placeholder-wave 2s linear infinite}@-webkit-keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.clearfix::after{display:block;clear:both;content:""}.link-primary{color:#0d6efd}.link-primary:focus,.link-primary:hover{color:#0a58ca}.link-secondary{color:#6c757d}.link-secondary:focus,.link-secondary:hover{color:#565e64}.link-success{color:#198754}.link-success:focus,.link-success:hover{color:#146c43}.link-info{color:#0dcaf0}.link-info:focus,.link-info:hover{color:#3dd5f3}.link-warning{color:#ffc107}.link-warning:focus,.link-warning:hover{color:#ffcd39}.link-danger{color:#dc3545}.link-danger:focus,.link-danger:hover{color:#b02a37}.link-light{color:#f8f9fa}.link-light:focus,.link-light:hover{color:#f9fafb}.link-dark{color:#212529}.link-dark:focus,.link-dark:hover{color:#1a1e21}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:calc(3 / 4 * 100%)}.ratio-16x9{--bs-aspect-ratio:calc(9 / 16 * 100%)}.ratio-21x9{--bs-aspect-ratio:calc(9 / 21 * 100%)}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}@media (min-width:576px){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:768px){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:992px){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:1200px){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:1400px){.sticky-xxl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:1px;min-height:1em;background-color:currentColor;opacity:.25}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-start{float:left!important}.float-end{float:right!important}.float-none{float:none!important}.opacity-0{opacity:0!important}.opacity-25{opacity:.25!important}.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}.opacity-100{opacity:1!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-visible{overflow:visible!important}.overflow-scroll{overflow:scroll!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.top-0{top:0!important}.top-50{top:50%!important}.top-100{top:100%!important}.bottom-0{bottom:0!important}.bottom-50{bottom:50%!important}.bottom-100{bottom:100%!important}.start-0{left:0!important}.start-50{left:50%!important}.start-100{left:100%!important}.end-0{right:0!important}.end-50{right:50%!important}.end-100{right:100%!important}.translate-middle{transform:translate(-50%,-50%)!important}.translate-middle-x{transform:translateX(-50%)!important}.translate-middle-y{transform:translateY(-50%)!important}.border{border:1px solid #dee2e6!important}.border-0{border:0!important}.border-top{border-top:1px solid #dee2e6!important}.border-top-0{border-top:0!important}.border-end{border-right:1px solid #dee2e6!important}.border-end-0{border-right:0!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-bottom-0{border-bottom:0!important}.border-start{border-left:1px solid #dee2e6!important}.border-start-0{border-left:0!important}.border-primary{border-color:#0d6efd!important}.border-secondary{border-color:#6c757d!important}.border-success{border-color:#198754!important}.border-info{border-color:#0dcaf0!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#212529!important}.border-white{border-color:#fff!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}.font-monospace{font-family:var(--bs-font-monospace)!important}.fs-1{font-size:calc(1.375rem + 1.5vw)!important}.fs-2{font-size:calc(1.325rem + .9vw)!important}.fs-3{font-size:calc(1.3rem + .6vw)!important}.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}.fst-italic{font-style:italic!important}.fst-normal{font-style:normal!important}.fw-light{font-weight:300!important}.fw-lighter{font-weight:lighter!important}.fw-normal{font-weight:400!important}.fw-bold{font-weight:700!important}.fw-bolder{font-weight:bolder!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.5!important}.lh-lg{line-height:2!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-break{word-wrap:break-word!important;word-break:break-word!important}.text-primary{--bs-text-opacity:1;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important}.text-secondary{--bs-text-opacity:1;color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important}.text-success{--bs-text-opacity:1;color:rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important}.text-info{--bs-text-opacity:1;color:rgba(var(--bs-info-rgb),var(--bs-text-opacity))!important}.text-warning{--bs-text-opacity:1;color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important}.text-danger{--bs-text-opacity:1;color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important}.text-light{--bs-text-opacity:1;color:rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important}.text-dark{--bs-text-opacity:1;color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.text-black{--bs-text-opacity:1;color:rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important}.text-white{--bs-text-opacity:1;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.text-body{--bs-text-opacity:1;color:rgba(var(--bs-body-rgb),var(--bs-text-opacity))!important}.text-muted{--bs-text-opacity:1;color:#6c757d!important}.text-black-50{--bs-text-opacity:1;color:rgba(0,0,0,.5)!important}.text-white-50{--bs-text-opacity:1;color:rgba(255,255,255,.5)!important}.text-reset{--bs-text-opacity:1;color:inherit!important}.text-opacity-25{--bs-text-opacity:0.25}.text-opacity-50{--bs-text-opacity:0.5}.text-opacity-75{--bs-text-opacity:0.75}.text-opacity-100{--bs-text-opacity:1}.bg-primary{--bs-bg-opacity:1;background-color:rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important}.bg-secondary{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity))!important}.bg-success{--bs-bg-opacity:1;background-color:rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important}.bg-info{--bs-bg-opacity:1;background-color:rgba(var(--bs-info-rgb),var(--bs-bg-opacity))!important}.bg-warning{--bs-bg-opacity:1;background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important}.bg-danger{--bs-bg-opacity:1;background-color:rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}.bg-dark{--bs-bg-opacity:1;background-color:rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important}.bg-black{--bs-bg-opacity:1;background-color:rgba(var(--bs-black-rgb),var(--bs-bg-opacity))!important}.bg-white{--bs-bg-opacity:1;background-color:rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important}.bg-body{--bs-bg-opacity:1;background-color:rgba(var(--bs-body-rgb),var(--bs-bg-opacity))!important}.bg-transparent{--bs-bg-opacity:1;background-color:transparent!important}.bg-opacity-10{--bs-bg-opacity:0.1}.bg-opacity-25{--bs-bg-opacity:0.25}.bg-opacity-50{--bs-bg-opacity:0.5}.bg-opacity-75{--bs-bg-opacity:0.75}.bg-opacity-100{--bs-bg-opacity:1}.bg-gradient{background-image:var(--bs-gradient)!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:.25rem!important}.rounded-0{border-radius:0!important}.rounded-1{border-radius:.2rem!important}.rounded-2{border-radius:.25rem!important}.rounded-3{border-radius:.3rem!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-end{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-start{border-bottom-left-radius:.25rem!important;border-top-left-radius:.25rem!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media (min-width:576px){.float-sm-start{float:left!important}.float-sm-end{float:right!important}.float-sm-none{float:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-sm-0{gap:0!important}.gap-sm-1{gap:.25rem!important}.gap-sm-2{gap:.5rem!important}.gap-sm-3{gap:1rem!important}.gap-sm-4{gap:1.5rem!important}.gap-sm-5{gap:3rem!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}.text-sm-start{text-align:left!important}.text-sm-end{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.float-md-start{float:left!important}.float-md-end{float:right!important}.float-md-none{float:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-md-0{gap:0!important}.gap-md-1{gap:.25rem!important}.gap-md-2{gap:.5rem!important}.gap-md-3{gap:1rem!important}.gap-md-4{gap:1.5rem!important}.gap-md-5{gap:3rem!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}.text-md-start{text-align:left!important}.text-md-end{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.float-lg-start{float:left!important}.float-lg-end{float:right!important}.float-lg-none{float:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-lg-0{gap:0!important}.gap-lg-1{gap:.25rem!important}.gap-lg-2{gap:.5rem!important}.gap-lg-3{gap:1rem!important}.gap-lg-4{gap:1.5rem!important}.gap-lg-5{gap:3rem!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}.text-lg-start{text-align:left!important}.text-lg-end{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.float-xl-start{float:left!important}.float-xl-end{float:right!important}.float-xl-none{float:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-xl-0{gap:0!important}.gap-xl-1{gap:.25rem!important}.gap-xl-2{gap:.5rem!important}.gap-xl-3{gap:1rem!important}.gap-xl-4{gap:1.5rem!important}.gap-xl-5{gap:3rem!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}.text-xl-start{text-align:left!important}.text-xl-end{text-align:right!important}.text-xl-center{text-align:center!important}}@media (min-width:1400px){.float-xxl-start{float:left!important}.float-xxl-end{float:right!important}.float-xxl-none{float:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-xxl-0{gap:0!important}.gap-xxl-1{gap:.25rem!important}.gap-xxl-2{gap:.5rem!important}.gap-xxl-3{gap:1rem!important}.gap-xxl-4{gap:1.5rem!important}.gap-xxl-5{gap:3rem!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}.text-xxl-start{text-align:left!important}.text-xxl-end{text-align:right!important}.text-xxl-center{text-align:center!important}}@media (min-width:1200px){.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}} +/*# sourceMappingURL=bootstrap.min.css.map */ \ No newline at end of file diff --git a/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css.map b/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css.map new file mode 100644 index 0000000..afcd9e3 --- /dev/null +++ b/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","../../scss/vendor/_rfs.scss","../../scss/mixins/_border-radius.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/_containers.scss","../../scss/mixins/_container.scss","../../scss/mixins/_breakpoints.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/_tables.scss","../../scss/mixins/_table-variants.scss","../../scss/forms/_labels.scss","../../scss/forms/_form-text.scss","../../scss/forms/_form-control.scss","../../scss/mixins/_transition.scss","../../scss/mixins/_gradients.scss","../../scss/forms/_form-select.scss","../../scss/forms/_form-check.scss","../../scss/forms/_form-range.scss","../../scss/forms/_floating-labels.scss","../../scss/forms/_input-group.scss","../../scss/mixins/_forms.scss","../../scss/_buttons.scss","../../scss/mixins/_buttons.scss","../../scss/_transitions.scss","../../scss/_dropdown.scss","../../scss/mixins/_caret.scss","../../scss/_button-group.scss","../../scss/_nav.scss","../../scss/_navbar.scss","../../scss/_card.scss","../../scss/_accordion.scss","../../scss/_breadcrumb.scss","../../scss/_pagination.scss","../../scss/mixins/_pagination.scss","../../scss/_badge.scss","../../scss/_alert.scss","../../scss/mixins/_alert.scss","../../scss/_progress.scss","../../scss/_list-group.scss","../../scss/mixins/_list-group.scss","../../scss/_close.scss","../../scss/_toasts.scss","../../scss/_modal.scss","../../scss/mixins/_backdrop.scss","../../scss/_tooltip.scss","../../scss/mixins/_reset-text.scss","../../scss/_popover.scss","../../scss/_carousel.scss","../../scss/mixins/_clearfix.scss","../../scss/_spinners.scss","../../scss/_offcanvas.scss","../../scss/_placeholders.scss","../../scss/helpers/_colored-links.scss","../../scss/helpers/_ratio.scss","../../scss/helpers/_position.scss","../../scss/helpers/_stacks.scss","../../scss/helpers/_visually-hidden.scss","../../scss/mixins/_visually-hidden.scss","../../scss/helpers/_stretched-link.scss","../../scss/helpers/_text-truncation.scss","../../scss/mixins/_text-truncate.scss","../../scss/helpers/_vr.scss","../../scss/mixins/_utilities.scss","../../scss/utilities/_api.scss"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Bootstrap v5.1.0 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n\n// scss-docs-start import-stack\n// Configuration\n@import \"functions\";\n@import \"variables\";\n@import \"mixins\";\n@import \"utilities\";\n\n// Layout & components\n@import \"root\";\n@import \"reboot\";\n@import \"type\";\n@import \"images\";\n@import \"containers\";\n@import \"grid\";\n@import \"tables\";\n@import \"forms\";\n@import \"buttons\";\n@import \"transitions\";\n@import \"dropdown\";\n@import \"button-group\";\n@import \"nav\";\n@import \"navbar\";\n@import \"card\";\n@import \"accordion\";\n@import \"breadcrumb\";\n@import \"pagination\";\n@import \"badge\";\n@import \"alert\";\n@import \"progress\";\n@import \"list-group\";\n@import \"close\";\n@import \"toasts\";\n@import \"modal\";\n@import \"tooltip\";\n@import \"popover\";\n@import \"carousel\";\n@import \"spinners\";\n@import \"offcanvas\";\n@import \"placeholders\";\n\n// Helpers\n@import \"helpers\";\n\n// Utilities\n@import \"utilities/api\";\n// scss-docs-end import-stack\n",":root {\n // Note: Custom variable values only support SassScript inside `#{}`.\n\n // Colors\n //\n // Generate palettes for full colors, grays, and theme colors.\n\n @each $color, $value in $colors {\n --#{$variable-prefix}#{$color}: #{$value};\n }\n\n @each $color, $value in $grays {\n --#{$variable-prefix}gray-#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors {\n --#{$variable-prefix}#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors-rgb {\n --#{$variable-prefix}#{$color}-rgb: #{$value};\n }\n\n --#{$variable-prefix}white-rgb: #{to-rgb($white)};\n --#{$variable-prefix}black-rgb: #{to-rgb($black)};\n --#{$variable-prefix}body-rgb: #{to-rgb($body-color)};\n\n // Fonts\n\n // Note: Use `inspect` for lists so that quoted items keep the quotes.\n // See https://github.com/sass/sass/issues/2383#issuecomment-336349172\n --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};\n --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};\n --#{$variable-prefix}gradient: #{$gradient};\n\n // Root and body\n // stylelint-disable custom-property-empty-line-before\n // scss-docs-start root-body-variables\n @if $font-size-root != null {\n --#{$variable-prefix}root-font-size: #{$font-size-root};\n }\n --#{$variable-prefix}body-font-family: #{$font-family-base};\n --#{$variable-prefix}body-font-size: #{$font-size-base};\n --#{$variable-prefix}body-font-weight: #{$font-weight-base};\n --#{$variable-prefix}body-line-height: #{$line-height-base};\n --#{$variable-prefix}body-color: #{$body-color};\n @if $body-text-align != null {\n --#{$variable-prefix}body-text-align: #{$body-text-align};\n }\n --#{$variable-prefix}body-bg: #{$body-bg};\n // scss-docs-end root-body-variables\n // stylelint-enable custom-property-empty-line-before\n}\n","// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n\n// Root\n//\n// Ability to the value of the root font sizes, affecting the value of `rem`.\n// null by default, thus nothing is generated.\n\n:root {\n @if $font-size-root != null {\n font-size: var(--#{$variable-prefix}-root-font-size);\n }\n\n @if $enable-smooth-scroll {\n @media (prefers-reduced-motion: no-preference) {\n scroll-behavior: smooth;\n }\n }\n}\n\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Prevent adjustments of font size after orientation changes in iOS.\n// 4. Change the default tap highlight to be completely transparent in iOS.\n\n// scss-docs-start reboot-body-rules\nbody {\n margin: 0; // 1\n font-family: var(--#{$variable-prefix}body-font-family);\n @include font-size(var(--#{$variable-prefix}body-font-size));\n font-weight: var(--#{$variable-prefix}body-font-weight);\n line-height: var(--#{$variable-prefix}body-line-height);\n color: var(--#{$variable-prefix}body-color);\n text-align: var(--#{$variable-prefix}body-text-align);\n background-color: var(--#{$variable-prefix}body-bg); // 2\n -webkit-text-size-adjust: 100%; // 3\n -webkit-tap-highlight-color: rgba($black, 0); // 4\n}\n// scss-docs-end reboot-body-rules\n\n\n// Content grouping\n//\n// 1. Reset Firefox's gray color\n// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field\n\nhr {\n margin: $hr-margin-y 0;\n color: $hr-color; // 1\n background-color: currentColor;\n border: 0;\n opacity: $hr-opacity;\n}\n\nhr:not([size]) {\n height: $hr-height; // 2\n}\n\n\n// Typography\n//\n// 1. Remove top margins from headings\n// By default, `

`-`

` all receive top and bottom margins. We nuke the top\n// margin for easier control within type scales as it avoids margin collapsing.\n\n%heading {\n margin-top: 0; // 1\n margin-bottom: $headings-margin-bottom;\n font-family: $headings-font-family;\n font-style: $headings-font-style;\n font-weight: $headings-font-weight;\n line-height: $headings-line-height;\n color: $headings-color;\n}\n\nh1 {\n @extend %heading;\n @include font-size($h1-font-size);\n}\n\nh2 {\n @extend %heading;\n @include font-size($h2-font-size);\n}\n\nh3 {\n @extend %heading;\n @include font-size($h3-font-size);\n}\n\nh4 {\n @extend %heading;\n @include font-size($h4-font-size);\n}\n\nh5 {\n @extend %heading;\n @include font-size($h5-font-size);\n}\n\nh6 {\n @extend %heading;\n @include font-size($h6-font-size);\n}\n\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `

`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-bs-original-title] { // 1\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n text-decoration-skip-ink: none; // 4\n}\n\n\n// Address\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\n\n// Lists\n\nol,\nul {\n padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // 1\n}\n\n\n// Blockquote\n\nblockquote {\n margin: 0 0 1rem;\n}\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n font-weight: $font-weight-bolder;\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n padding: $mark-padding;\n background-color: $mark-bg;\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n position: relative;\n @include font-size($sub-sup-font-size);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n\n &:hover {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n &,\n &:hover {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-code;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n direction: ltr #{\"/* rtl:ignore */\"};\n unicode-bidi: bidi-override;\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don't allow content to break outside\n\npre {\n display: block;\n margin-top: 0; // 1\n margin-bottom: 1rem; // 2\n overflow: auto; // 3\n @include font-size($code-font-size);\n color: $pre-color;\n\n // Account for some code outputs that place code tags in pre tags\n code {\n @include font-size(inherit);\n color: inherit;\n word-break: normal;\n }\n}\n\ncode {\n @include font-size($code-font-size);\n color: $code-color;\n word-wrap: break-word;\n\n // Streamline the style when inside anchors to avoid broken underline and more\n a > & {\n color: inherit;\n }\n}\n\nkbd {\n padding: $kbd-padding-y $kbd-padding-x;\n @include font-size($kbd-font-size);\n color: $kbd-color;\n background-color: $kbd-bg;\n @include border-radius($border-radius-sm);\n\n kbd {\n padding: 0;\n @include font-size(1em);\n font-weight: $nested-kbd-font-weight;\n }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n vertical-align: middle;\n}\n\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n caption-side: bottom;\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: $table-cell-padding-y;\n padding-bottom: $table-cell-padding-y;\n color: $table-caption-color;\n text-align: left;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `` alignment by inheriting `text-align`.\n// 3. Fix alignment for Safari\n\nth {\n font-weight: $table-th-font-weight; // 1\n text-align: inherit; // 2\n text-align: -webkit-match-parent; // 3\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n border-color: inherit;\n border-style: solid;\n border-width: 0;\n}\n\n\n// Forms\n//\n// 1. Allow labels to use `margin` for spacing.\n\nlabel {\n display: inline-block; // 1\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n// See https://github.com/twbs/bootstrap/issues/24093\n\nbutton {\n // stylelint-disable-next-line property-disallowed-list\n border-radius: 0;\n}\n\n// Explicitly remove focus outline in Chromium when it shouldn't be\n// visible (e.g. as result of mouse click or touch tap). It already\n// should be doing this automatically, but seems to currently be\n// confused and applies its very visible two-tone outline anyway.\n\nbutton:focus:not(:focus-visible) {\n outline: 0;\n}\n\n// 1. Remove the margin in Firefox and Safari\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n margin: 0; // 1\n font-family: inherit;\n @include font-size(inherit);\n line-height: inherit;\n}\n\n// Remove the inheritance of text transform in Firefox\nbutton,\nselect {\n text-transform: none;\n}\n// Set the cursor for non-` - -

- -
-
- -
-
- -
- - - -
- - - - - - - - - - -
-@functions{ - SfDiagramComponent? diagram; - public static List employeeDetails { get; set; } - - - Layout LayoutValue = new Layout() { }; - private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) - { - options.EnableSubTree = true; - options.Orientation = Orientation.Horizontal; - return options; - } - private void NodeCreating(IDiagramObject obj) - { - Node? node = obj as Node; - node.Width = 200; - node.Height = 100; - Dictionary data = node.Data as Dictionary; - if (data != null) - { - node.Annotations = new DiagramObjectCollection() -{ - new ShapeAnnotation() - { - Content = $"Name:{data["Name"]}\nReportsTo:{data["ReportsTo"]}\nDesignation:{data["Designation"]}", - } - }; - } - } - private void ConnectorCreating(IDiagramObject connector) - { - Connector? newConnector = connector as Connector; - newConnector!.TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.None }; - newConnector.Type = ConnectorSegmentType.Orthogonal; - newConnector.Style = new ShapeStyle() { StrokeColor = "#6d6d6d" }; - newConnector.Constraints = ConnectorConstraints.None; - newConnector.CornerRadius = 5; - } - - - public class EmployeeDetails - { - public int EmployeeID { get; set; } - - public string ReportsTo { get; set; } - - public string Name { get; set; } - - public string Designation { get; set; } - - public string Colour { get; set; } - } - - - public async void Read() - { - var data = await diagram.ReadDataAsync(); - } - - public async void Update() - { - EmployeeDetails employeeDetails1 = new EmployeeDetails() - { - EmployeeID = 6, - Name = "Michael", - Designation = "Team Lead", - ReportsTo = "1", - Colour = "Orange" - }; - EmployeeDetails employeeDetails = new EmployeeDetails() - { - EmployeeID = 6, - Name = "Michael", - Designation = "Product Manager", - ReportsTo = "1", - Colour = "Green" - }; - Dictionary propoerties = new Dictionary() - { - {"Designation","Product Manager" }, - {"Colour","Green" }, - {"ReportsTo", "1" } - }; - await diagram.UpdateDataAsync("EmployeeID", employeeDetails, "Employees"); - } - - - public async void Insert() - { - EmployeeDetails employeeDetails = new EmployeeDetails() - { - EmployeeID = 11, - Name = "Alan", - Designation = "HR assistant", - ReportsTo = "9", - Colour = "Gray" - }; - await diagram.InsertDataAsync(employeeDetails, "Employees"); - - } - - public async void Delete() - { - await diagram.DeleteDataAsync("EmployeeID", 5); - } - - -} - diff --git a/Diagram/Server/Pages/DrawingTools/ToolSelection.razor b/Diagram/Server/Pages/DrawingTools/ToolSelection.razor index 8e218fa..c40f79b 100644 --- a/Diagram/Server/Pages/DrawingTools/ToolSelection.razor +++ b/Diagram/Server/Pages/DrawingTools/ToolSelection.razor @@ -1,4 +1,4 @@ -@page "/" +@page "/ToolSelection" @using Syncfusion.Blazor.Diagram diff --git a/Diagram/Server/Pages/Events/DragDrop.razor b/Diagram/Server/Pages/Events/DragDrop.razor index 6423560..3ec6f5c 100644 --- a/Diagram/Server/Pages/Events/DragDrop.razor +++ b/Diagram/Server/Pages/Events/DragDrop.razor @@ -8,7 +8,7 @@ Width="100%" Height="700px" Nodes="nodes" - DragDrop="DragDrop"> + DragDrop="DragDrop1"> @@ -48,7 +48,7 @@ }; } // Notify the drop event. - private void DragDrop(DropEventArgs args) + private void DragDrop1(DropEventArgs args) { //Action to be performed. } diff --git a/Diagram/Server/Pages/Export/ExportToPDF.razor b/Diagram/Server/Pages/Export/ExportToPDF.razor deleted file mode 100644 index c2880e6..0000000 --- a/Diagram/Server/Pages/Export/ExportToPDF.razor +++ /dev/null @@ -1,73 +0,0 @@ -@page "/ExportToPDF" -@using Syncfusion.PdfExport; - -@using Syncfusion.Blazor.Diagram -@using Syncfusion.Blazor.Buttons -@inject IJSRuntime JS; - - - - - -@code{ - //Reference the diagram - SfDiagramComponent diagram; - - private async void ExportPDF() - { - DiagramExportSettings print = new DiagramExportSettings(); - print.Region = DiagramPrintExportRegion.PageSettings; - print.PageWidth = 500; - print.PageHeight = 800; - print.Orientation = PageOrientation.Portrait; - print.FitToPage = true; - print.Margin = new DiagramThickness() { Left = 30, Top = 20, Right = 10, Bottom = 10 }; - print.ClipBounds = new DiagramRect() { X = 200, Y = 200, Width = 200, Height = 200 }; - //To export the diagram into base64 - var images = await diagram.ExportAsync(DiagramExportFormat.PNG, print); - var pdforientation = PageOrientation.Portrait == PageOrientation.Landscape ? PdfPageOrientation.Landscape : PdfPageOrientation.Portrait; - await ExportToPdf("diagram", pdforientation, true, images); - } - // - private async Task ExportToPdf(string fileName, PdfPageOrientation orientation, bool allowDownload, string[] images) - { - PdfDocument document = new PdfDocument(); - document.PageSettings.Orientation = orientation; - document.PageSettings.Margins = new PdfMargins() { Left = 0, Right = 0, Top = 0, Bottom = 0 }; - string base64String; - var dict = images; - for (int i = 0; i < dict.Count(); i++) - { - base64String = dict[i]; - using (MemoryStream initialStream = new MemoryStream(Convert.FromBase64String(base64String.Split("base64,")[1]))) - { - Stream stream = initialStream as Stream; - PdfPage page = document.Pages.Add(); - PdfGraphics graphics = page.Graphics; - #pragma warning disable CA2000 - PdfBitmap image = new PdfBitmap(stream); - #pragma warning restore CA2000 - graphics.DrawImage(image, 0, 0); - } - } - using (MemoryStream memoryStream = new MemoryStream()) - { - document.Save(memoryStream); - memoryStream.Position = 0; - base64String = Convert.ToBase64String(memoryStream.ToArray()); - if (allowDownload) - { - await JSRuntimeExtensions.InvokeAsync(JS, "downloadPdf", new object[] { base64String, fileName }); - base64String = string.Empty; - } - else - { - base64String = "data:application/pdf;base64," + base64String; - } - document.Dispose(); - } - return base64String; - } - - } - \ No newline at end of file diff --git a/Diagram/Server/Pages/Flip/FlipDirection.razor b/Diagram/Server/Pages/Flip/FlipDirectionSample.razor similarity index 100% rename from Diagram/Server/Pages/Flip/FlipDirection.razor rename to Diagram/Server/Pages/Flip/FlipDirectionSample.razor diff --git a/Diagram/Server/Pages/Gridlines/Appearance.razor b/Diagram/Server/Pages/Gridlines/Appearance.razor index 211ac49..d3e80c1 100644 --- a/Diagram/Server/Pages/Gridlines/Appearance.razor +++ b/Diagram/Server/Pages/Gridlines/Appearance.razor @@ -1,4 +1,4 @@ -@page "/Appearance" +@page "/GridLineAppearance" @using Syncfusion.Blazor.Diagram diff --git a/Diagram/Server/Pages/Gridlines/LineInterval.razor b/Diagram/Server/Pages/Gridlines/LineInterval.razor index daea92c..0df3552 100644 --- a/Diagram/Server/Pages/Gridlines/LineInterval.razor +++ b/Diagram/Server/Pages/Gridlines/LineInterval.razor @@ -6,9 +6,9 @@ @* Customize the appearance of the grid lines *@ - + - + @@ -16,7 +16,7 @@ @code { //Sets the line intervals for the gridlines - public double[] LineInterval { get; set; } = new double[] + public double[] Interval { get; set; } = new double[] { 1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15 }; diff --git a/Diagram/Server/Pages/Index.razor b/Diagram/Server/Pages/Index.razor index 76cc14e..cba3252 100644 --- a/Diagram/Server/Pages/Index.razor +++ b/Diagram/Server/Pages/Index.razor @@ -1,56 +1,3 @@ @page "/" -@using Syncfusion.Blazor.Diagram -@using Syncfusion.Blazor.Buttons - - - - - - -@code -{ - // Reference to diagram - SfDiagramComponent diagram; - // Initialize diagram's node collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); - - protected override void OnInitialized() - { - Node node1 = new Node() - { - ID = "node1", - Width = 50, - Height = 30, - OffsetX = 500, - OffsetY = 100, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; - nodes.Add(node1); - Node node2 = new Node() - { - ID = "node2", - Width = 60, - Height = 40, - OffsetX = 500, - OffsetY = 300, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; - nodes.Add(node2); - Node node3 = new Node() - { - ID = "node3", - Width = 70, - Height = 50, - OffsetX = 500, - OffsetY = 500, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; - nodes.Add(node3); - } - //Method to align all the selected objectes at bottom of selection boundary - private void OnAlignBottom() - { - diagram.SetAlign(AlignmentOptions.Bottom); - } -} \ No newline at end of file +

Hello, world!

diff --git a/Diagram/Server/Pages/Interaction/RubberBandSelectionMode.razor b/Diagram/Server/Pages/Interaction/RubberBandSelectionModeSample.razor similarity index 100% rename from Diagram/Server/Pages/Interaction/RubberBandSelectionMode.razor rename to Diagram/Server/Pages/Interaction/RubberBandSelectionModeSample.razor diff --git a/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutSettings.razor b/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutSettingsSample.razor similarity index 100% rename from Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutSettings.razor rename to Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutSettingsSample.razor diff --git a/Diagram/Server/Pages/Methods/Clear.razor b/Diagram/Server/Pages/Methods/Clear.razor index b515d8e..eb4baa8 100644 --- a/Diagram/Server/Pages/Methods/Clear.razor +++ b/Diagram/Server/Pages/Methods/Clear.razor @@ -3,7 +3,7 @@ @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - + @code @@ -56,7 +56,7 @@ TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } } }); } - private void Clear() + private void ClearMethod() { diagram.Clear(); } diff --git a/Diagram/Server/Pages/Methods/ClearSelection.razor b/Diagram/Server/Pages/Methods/ClearSelection.razor index 6181cbf..db2e542 100644 --- a/Diagram/Server/Pages/Methods/ClearSelection.razor +++ b/Diagram/Server/Pages/Methods/ClearSelection.razor @@ -21,7 +21,7 @@
- +
@code { @@ -79,7 +79,7 @@ } //Method to clear the selected nodes/connectors. - public void ClearSelection() + public void ClearSelectionMethod() { diagram.ClearSelection(); } diff --git a/Diagram/Server/Pages/Methods/CloneMethod.razor b/Diagram/Server/Pages/Methods/CloneMethod.razor index 87d0b1a..ac6013d 100644 --- a/Diagram/Server/Pages/Methods/CloneMethod.razor +++ b/Diagram/Server/Pages/Methods/CloneMethod.razor @@ -21,7 +21,7 @@
- +
@code { @@ -79,7 +79,7 @@ } //Method to clone the diagram - public void CloneMethod() + public void Clone() { diagram.Clone(); } diff --git a/Diagram/Server/Pages/Methods/Delete.razor b/Diagram/Server/Pages/Methods/Delete.razor index 0fd0db9..6f08586 100644 --- a/Diagram/Server/Pages/Methods/Delete.razor +++ b/Diagram/Server/Pages/Methods/Delete.razor @@ -3,7 +3,7 @@ @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - + @@ -84,7 +84,7 @@ Nodes.Add(groupNode); } //Deletes DiagramElements with null parameter - public void Delete() + public void DeleteMethod() { diagram.Delete(); } diff --git a/Diagram/Server/Pages/Methods/GetCustomTool.razor b/Diagram/Server/Pages/Methods/GetCustomTool.razor index 5c02b19..0059281 100644 --- a/Diagram/Server/Pages/Methods/GetCustomTool.razor +++ b/Diagram/Server/Pages/Methods/GetCustomTool.razor @@ -146,7 +146,6 @@ { Name = "changeCursor", Offset = 0.5, - Source = "https://www.w3schools.com/images/w3schools_green.jpg", Visible = true, Side = Direction.Bottom, Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, diff --git a/Diagram/Server/Pages/Methods/GetObjectMethod.razor b/Diagram/Server/Pages/Methods/GetObjectMethod.razor index def5a30..0608124 100644 --- a/Diagram/Server/Pages/Methods/GetObjectMethod.razor +++ b/Diagram/Server/Pages/Methods/GetObjectMethod.razor @@ -21,7 +21,7 @@
- +
@code { @@ -79,7 +79,7 @@ } //Method to get object - public void GetObjectMethod() + public void GetObjectMethod1() { Node node = diagram.GetObject("node1") as Node; diagram.Select(new System.Collections.ObjectModel.ObservableCollection (){node}); diff --git a/Diagram/Server/Pages/Methods/GetPageBounds.razor b/Diagram/Server/Pages/Methods/GetPageBounds.razor index a812a6d..125f578 100644 --- a/Diagram/Server/Pages/Methods/GetPageBounds.razor +++ b/Diagram/Server/Pages/Methods/GetPageBounds.razor @@ -21,7 +21,7 @@
- +
@code { @@ -79,7 +79,7 @@ } //Method to get pagebounds value - public void GetPageBounds() + public void GetPageBound() { DiagramRect diagramRect = diagram.GetPageBounds(); } diff --git a/Diagram/Server/Pages/Methods/GetParent.razor b/Diagram/Server/Pages/Methods/GetParent.razor index 025d3d5..c4244a7 100644 --- a/Diagram/Server/Pages/Methods/GetParent.razor +++ b/Diagram/Server/Pages/Methods/GetParent.razor @@ -4,7 +4,7 @@ @using System.Collections.ObjectModel @using Syncfusion.Blazor.Buttons - + @code @@ -36,7 +36,7 @@ }; nodes.Add(node); } - private void GetParent() + private void GetParentMethod() { IDiagramObject parent = diagram.Nodes[0].GetParent(); } diff --git a/Diagram/Server/Pages/Methods/ResetZoom.razor b/Diagram/Server/Pages/Methods/ResetZoom.razor index 0b8d0ee..6c46b00 100644 --- a/Diagram/Server/Pages/Methods/ResetZoom.razor +++ b/Diagram/Server/Pages/Methods/ResetZoom.razor @@ -23,7 +23,7 @@
- +
@code { @@ -89,7 +89,7 @@ { diagram.Zoom(1 / 1.2, new DiagramPoint { X = 100, Y = 100 }); } - private void ResetZoom() + private void Reset() { diagram.ResetZoom(); } diff --git a/Diagram/Server/Pages/Methods/ScaleMethod.razor b/Diagram/Server/Pages/Methods/ScaleMethod.razor index 209a5fb..9f69645 100644 --- a/Diagram/Server/Pages/Methods/ScaleMethod.razor +++ b/Diagram/Server/Pages/Methods/ScaleMethod.razor @@ -21,7 +21,7 @@
- +
@code { @@ -79,7 +79,7 @@ } //Method to scale the selected objects in the diagram - public void ScaleMethod() + public void Scale() { diagram.Scale(diagram.SelectionSettings.Nodes[0], 10, 10, new DiagramPoint(0.5, 0.5)); } diff --git a/Diagram/Server/Pages/Methods/SelectAllMethod.razor b/Diagram/Server/Pages/Methods/SelectAllMethod.razor index 2386e4c..a416ca7 100644 --- a/Diagram/Server/Pages/Methods/SelectAllMethod.razor +++ b/Diagram/Server/Pages/Methods/SelectAllMethod.razor @@ -21,7 +21,7 @@
- +
@@ -80,7 +80,7 @@ } //Method to select all objects in the diagram - public void SelectAllMethod() + public void SelectAll() { diagram.SelectAll(); } diff --git a/Diagram/Server/Pages/Methods/UnSelectMethod.razor b/Diagram/Server/Pages/Methods/UnSelectMethod.razor index eaeb54a..636f2ec 100644 --- a/Diagram/Server/Pages/Methods/UnSelectMethod.razor +++ b/Diagram/Server/Pages/Methods/UnSelectMethod.razor @@ -21,7 +21,7 @@
- +
@code { @@ -79,7 +79,7 @@ } //Method to unselect the selected objects - public void UnSelectMethod() + public void UnSelect() { diagram.UnSelect(diagram.SelectionSettings.Nodes[0] as IDiagramObject); } diff --git a/Diagram/Server/Pages/Nodes/Appearance/CustomProperty.razor b/Diagram/Server/Pages/Nodes/Appearance/CustomProperty.razor index 3511479..e66cc1f 100644 --- a/Diagram/Server/Pages/Nodes/Appearance/CustomProperty.razor +++ b/Diagram/Server/Pages/Nodes/Appearance/CustomProperty.razor @@ -1,4 +1,4 @@ -@page "/CustomProperty" +@page "/NodeCustomProperty" @using Syncfusion.Blazor.Diagram diff --git a/Diagram/Server/Pages/Nodes/Appearance/ZIndexProperty.razor b/Diagram/Server/Pages/Nodes/Appearance/ZIndexProperty.razor index 65d6da7..89c101e 100644 --- a/Diagram/Server/Pages/Nodes/Appearance/ZIndexProperty.razor +++ b/Diagram/Server/Pages/Nodes/Appearance/ZIndexProperty.razor @@ -1,4 +1,4 @@ -@page "/ZIndexProperty" +@page "/NodeZIndexProperty" @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel diff --git a/Diagram/Server/Pages/Nodes/CloneNode/CloneNode.razor b/Diagram/Server/Pages/Nodes/CloneNode/CloneNode.razor index 4bc0c68..47b92f8 100644 --- a/Diagram/Server/Pages/Nodes/CloneNode/CloneNode.razor +++ b/Diagram/Server/Pages/Nodes/CloneNode/CloneNode.razor @@ -5,7 +5,7 @@ @using Syncfusion.Blazor.Buttons @inject IJSRuntime js - + @functions @@ -33,7 +33,7 @@ }; NodeCollection.Add(node1); } - public async Task CloneNode() + public async Task CloneNodeMethod() { Node node = NodeCollection[0].Clone() as Node; node.ID = RandomId(); diff --git a/Diagram/Server/Pages/Nodes/Events/CollectionChangeEvent.razor b/Diagram/Server/Pages/Nodes/Events/CollectionChangeEvent.razor index 2d34970..42ecd45 100644 --- a/Diagram/Server/Pages/Nodes/Events/CollectionChangeEvent.razor +++ b/Diagram/Server/Pages/Nodes/Events/CollectionChangeEvent.razor @@ -1,4 +1,4 @@ -@page "/CollectionChangeEvent" +@page "/NodeCollectionChangeEvent" @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel diff --git a/Diagram/Server/Pages/Nodes/Events/MouseEnterEvent.razor b/Diagram/Server/Pages/Nodes/Events/MouseEnterEvent.razor index 758e0ea..fdf5ffa 100644 --- a/Diagram/Server/Pages/Nodes/Events/MouseEnterEvent.razor +++ b/Diagram/Server/Pages/Nodes/Events/MouseEnterEvent.razor @@ -1,4 +1,4 @@ -@page "/MouseEnterEvent" +@page "/NodeMouseEnterEvent" @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel diff --git a/Diagram/Server/Pages/Nodes/Events/MouseHoverEvent.razor b/Diagram/Server/Pages/Nodes/Events/MouseHoverEvent.razor index 5e8bd64..3a8ccac 100644 --- a/Diagram/Server/Pages/Nodes/Events/MouseHoverEvent.razor +++ b/Diagram/Server/Pages/Nodes/Events/MouseHoverEvent.razor @@ -1,4 +1,4 @@ -@page "/MouseHoverEvent" +@page "/NodeMouseHoverEvent" @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel diff --git a/Diagram/Server/Pages/Nodes/Events/MouseLeaveEvent.razor b/Diagram/Server/Pages/Nodes/Events/MouseLeaveEvent.razor index 481ef22..40890af 100644 --- a/Diagram/Server/Pages/Nodes/Events/MouseLeaveEvent.razor +++ b/Diagram/Server/Pages/Nodes/Events/MouseLeaveEvent.razor @@ -1,4 +1,4 @@ -@page "/MouseLeaveEvent" +@page "/NodeMouseLeaveEvent" @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel diff --git a/Diagram/Server/Pages/Nodes/Events/PropertyChangedEvent.razor b/Diagram/Server/Pages/Nodes/Events/PropertyChangedEvent.razor index 7d9ded5..9df1ec1 100644 --- a/Diagram/Server/Pages/Nodes/Events/PropertyChangedEvent.razor +++ b/Diagram/Server/Pages/Nodes/Events/PropertyChangedEvent.razor @@ -1,4 +1,4 @@ -@page "/PropertyChangedEvent" +@page "/NodePropertyChangedEvent" @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/Appearance.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/Appearance.razor index 15aaac8..327739e 100644 --- a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/Appearance.razor +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/Appearance.razor @@ -1,4 +1,4 @@ -@page "/Appearance" +@page "/ExpandAndCollapseAppearance" @using Syncfusion.Blazor.Diagram diff --git a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/CornerRadius.razor b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/CornerRadius.razor index 1d836dc..e9d51e4 100644 --- a/Diagram/Server/Pages/Nodes/ExpandAndCollapse/CornerRadius.razor +++ b/Diagram/Server/Pages/Nodes/ExpandAndCollapse/CornerRadius.razor @@ -1,4 +1,4 @@ -@page "/CornerRadius" +@page "/NodeCornerRadius" @using Syncfusion.Blazor.Diagram diff --git a/Diagram/Server/Pages/Nodes/Interaction/Drag.razor b/Diagram/Server/Pages/Nodes/Interaction/Drag.razor index 6f76045..958dc15 100644 --- a/Diagram/Server/Pages/Nodes/Interaction/Drag.razor +++ b/Diagram/Server/Pages/Nodes/Interaction/Drag.razor @@ -1,4 +1,4 @@ -@page "/Drag" +@page "/NodeDrag" @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons diff --git a/Diagram/Server/Pages/PageSettings/BoundaryConstraints.razor b/Diagram/Server/Pages/PageSettings/BoundaryConstraintsExample.razor similarity index 97% rename from Diagram/Server/Pages/PageSettings/BoundaryConstraints.razor rename to Diagram/Server/Pages/PageSettings/BoundaryConstraintsExample.razor index 2b2a1d7..014d93c 100644 --- a/Diagram/Server/Pages/PageSettings/BoundaryConstraints.razor +++ b/Diagram/Server/Pages/PageSettings/BoundaryConstraintsExample.razor @@ -1,4 +1,4 @@ -@page "/BoundaryConstraints" +@page "/BoundaryConstraintsExample" @using Syncfusion.Blazor.Diagram diff --git a/Diagram/Server/Pages/PageSettings/PageOrientation.razor b/Diagram/Server/Pages/PageSettings/PageOrientationSample.razor similarity index 100% rename from Diagram/Server/Pages/PageSettings/PageOrientation.razor rename to Diagram/Server/Pages/PageSettings/PageOrientationSample.razor diff --git a/Diagram/Server/Pages/Ports/ActionofPorts/CreatePorts.razor b/Diagram/Server/Pages/Ports/ActionofPorts/CreatePorts.razor index bf01628..a05a16a 100644 --- a/Diagram/Server/Pages/Ports/ActionofPorts/CreatePorts.razor +++ b/Diagram/Server/Pages/Ports/ActionofPorts/CreatePorts.razor @@ -1,4 +1,4 @@ -@page "/" +@page "/CreatePorts" @using Syncfusion.Blazor.Diagram diff --git a/Diagram/Server/Pages/Ports/ActionofPorts/InedgesAndOutedges.razor b/Diagram/Server/Pages/Ports/ActionofPorts/InedgesAndOutedges.razor new file mode 100644 index 0000000..94d8ea8 --- /dev/null +++ b/Diagram/Server/Pages/Ports/ActionofPorts/InedgesAndOutedges.razor @@ -0,0 +1,97 @@ +@page "/InedgesAndOutedges" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, + // Initialize port collection. + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + Visibility = PortVisibility.Visible, + //Set the style for the port. + Style= new ShapeStyle() + { + Fill = "red", + StrokeColor = "black", + StrokeWidth = 2 + }, + Width = 12, + Height = 12, + // Sets the shape of the port as a Circle. + Shape = PortShapes.Circle + } + }, + + }; + nodes.Add(node1); + Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + // Initialize port collection. + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + Visibility = PortVisibility.Visible, + //Set the style for the port. + Style= new ShapeStyle() + { + Fill = "red", + StrokeColor = "black", + StrokeWidth = 2 + }, + Width = 12, + Height = 12, + // Sets the shape of the port as Circle . + Shape = PortShapes.Circle + } + }, + }; + nodes.Add(node2); + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + SourcePortID = "port1", + TargetPortID = "port1", + TargetID = "node2", + }; + connectors.Add(connector1); + } + private void GetInEdges() + { + List Inedges = new List(); + foreach (string inedge in diagram.Nodes[1].Ports[0].InEdges) + { + Inedges.Add(inedge); + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/ActionofPorts/PortDirection.razor b/Diagram/Server/Pages/Ports/ActionofPorts/PortDirection.razor new file mode 100644 index 0000000..8b33ea6 --- /dev/null +++ b/Diagram/Server/Pages/Ports/ActionofPorts/PortDirection.razor @@ -0,0 +1,78 @@ +@page "/PortDirection" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Defines Diagram's Nodes collection + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Defines Diagram's Connectors collection + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "n1", + // Position of the node. + OffsetX = 200, + OffsetY = 200, + // Size of the node. + Width = 70, + Height = 70, + Ports = new DiagramObjectCollection() + { + new PointPort() + { ID="n1p1", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + Visibility = PortVisibility.Visible, + Constraints = PortConstraints.Default|PortConstraints.Draw, + //Set Port Connection Direction + ConnectionDirection = PortConnectionDirection.Left + } + } + }; + nodes.Add(node1); + + Node node2 = new Node() + { + ID = "n2", + // Position of the node. + OffsetX = 400, + OffsetY = 300, + // Size of the node. + Width = 70, + Height = 70, + Ports = new DiagramObjectCollection() + { + new PointPort() + { ID="n2p1", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + Visibility = PortVisibility.Visible, + Constraints = PortConstraints.Default|PortConstraints.Draw, + //Set Port Connection Direction + ConnectionDirection = PortConnectionDirection.Bottom + } + } + }; + // Add node. + nodes.Add(node2); + + Connector Connector1 = new Connector() + { + ID = "connector1", + // Set the source and target point of the connector. + SourceID = "n1", + TargetID = "n2", + SourcePortID = "n1p1", + TargetPortID = "n2p1", + // Type of the connector segments. + Type = ConnectorSegmentType.Orthogonal + }; + connectors.Add(Connector1); + } +} diff --git a/Diagram/Server/Pages/Ports/ActionofPorts/RemovePorts.razor b/Diagram/Server/Pages/Ports/ActionofPorts/RemovePorts.razor new file mode 100644 index 0000000..657c744 --- /dev/null +++ b/Diagram/Server/Pages/Ports/ActionofPorts/RemovePorts.razor @@ -0,0 +1,49 @@ +@page "/RemovePorts" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // A node is created and stored in nodes array. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Initialize port collection + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + Visibility = PortVisibility.Visible, + //Set the style for the port + Style= new ShapeStyle(){ Fill="red", StrokeColor="black", StrokeWidth=2}, + // Sets the shape of the port as Circle + Width= 12, Height=12, Shape= PortShapes.Circle + } + }, + }; + nodes.Add(node); + } + //MMethod to remove ports at runtime + public void RemovePort() + { + (nodes[0].Ports as DiagramObjectCollection).RemoveAt(0); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/ActionofPorts/TooltipForSpecificPort.razor b/Diagram/Server/Pages/Ports/ActionofPorts/TooltipForSpecificPort.razor new file mode 100644 index 0000000..72eef39 --- /dev/null +++ b/Diagram/Server/Pages/Ports/ActionofPorts/TooltipForSpecificPort.razor @@ -0,0 +1,66 @@ +@page "/TooltipForSpecificPort" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Ports = new DiagramObjectCollection() + { + new PointPort(){ + ID="Port1", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + Visibility = PortVisibility.Visible, + Tooltip = new DiagramTooltip(){ Content = "OutConnectPort"}, + Constraints = PortConstraints.Default | PortConstraints.Draw + } + } + }; + nodes.Add(node); + Node node2 = new Node() + { + ID = "node2", + OffsetX = 450, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID="Port2", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0.5}, + Visibility = PortVisibility.Visible, + Tooltip = new DiagramTooltip(){ Content = "InConnectPort"}, + Constraints = PortConstraints.Default | PortConstraints.Draw + } + } + }; + nodes.Add(node2); + } +} diff --git a/Diagram/Server/Pages/Ports/ActionofPorts/UpdatePorts.razor b/Diagram/Server/Pages/Ports/ActionofPorts/UpdatePorts.razor new file mode 100644 index 0000000..e0a6657 --- /dev/null +++ b/Diagram/Server/Pages/Ports/ActionofPorts/UpdatePorts.razor @@ -0,0 +1,46 @@ +@page "/UpdatePorts" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + // Initialize port collection + DiagramObjectCollection ports = new DiagramObjectCollection(); + ports.Add(new PointPort() { ID = "port", Offset = new DiagramPoint() { X = 0, Y = 0.5 }, Visibility = PortVisibility.Visible }); + // A node is created and stored in nodes array + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + Ports = ports + }; + nodes.Add(node); + } + + public async void UpdatePort() + { + //update ports at run time + diagram.BeginUpdate(); + nodes[0].Ports[0].Offset.X = 1; + nodes[0].Ports[0].Offset.Y = 1; + await diagram.EndUpdateAsync(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/Appearance/AdditionalInfoPropertyPort.razor b/Diagram/Server/Pages/Ports/Appearance/AdditionalInfoPropertyPort.razor new file mode 100644 index 0000000..6172a81 --- /dev/null +++ b/Diagram/Server/Pages/Ports/Appearance/AdditionalInfoPropertyPort.razor @@ -0,0 +1,38 @@ +@page "/AdditionalInfoPropertyPort" + +@using Syncfusion.Blazor.Diagram + +@code +{ + DiagramObjectCollection nodes; + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // Create a dictionary to hold additional information for the port. + Dictionary PortInfo = new Dictionary(); + PortInfo.Add("portInfo", "Port A"); + // Create a port with additional info. + PointPort port = new PointPort() + { + Offset = new DiagramPoint { X = 0.5, Y = 0.5 }, + Visibility = PortVisibility.Visible, + AdditionalInfo = PortInfo + }; + // A node is created and stored in nodes collection. + Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Ports = new DiagramObjectCollection { port } + }; + // Add node. + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/Appearance/Appearance.razor b/Diagram/Server/Pages/Ports/Appearance/Appearance.razor new file mode 100644 index 0000000..5f9727b --- /dev/null +++ b/Diagram/Server/Pages/Ports/Appearance/Appearance.razor @@ -0,0 +1,42 @@ +@page "/PortAppearance" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Initialize port collection + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + Visibility = PortVisibility.Visible, + //Set the style for the port + Style= new ShapeStyle(){ Fill="red", StrokeColor="black", StrokeWidth=2}, + // Sets the shape of the port as Circle + Width= 12, Height=12, Shape= PortShapes.Circle + } + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/Appearance/CustomShape.razor b/Diagram/Server/Pages/Ports/Appearance/CustomShape.razor new file mode 100644 index 0000000..7c1df63 --- /dev/null +++ b/Diagram/Server/Pages/Ports/Appearance/CustomShape.razor @@ -0,0 +1,43 @@ +@page "/CustomShape" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Initialize port collection + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 0.5, Y = 0.5 }, + Visibility = PortVisibility.Visible, + //Set the style for the port + Style= new ShapeStyle(){ Fill="gray", StrokeColor="black"}, + // Sets the shape of the port as Circle + Width= 12, Height=12, Shape= PortShapes.Custom, + PathData="M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z" + } + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/ConnectorPort/ConnectorPortConnection.razor b/Diagram/Server/Pages/Ports/ConnectorPort/ConnectorPortConnection.razor new file mode 100644 index 0000000..0664935 --- /dev/null +++ b/Diagram/Server/Pages/Ports/ConnectorPort/ConnectorPortConnection.razor @@ -0,0 +1,113 @@ +@page "/ConnectorPortConnection" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + // Initialize connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector connector1 = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 200, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 350, Y = 250 }, + Type = ConnectorSegmentType.Bezier, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }, + Ports = new DiagramObjectCollection() + { + new ConnectorPort() + { + ID = "port", + Visibility = PortVisibility.Visible, + Shape = PortShapes.Square, + Style = new ShapeStyle(){ Fill = "gray", StrokeColor = "gray" }, + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }; + + Connector connector2 = new Connector() + { + ID = "connector2", + SourcePoint = new DiagramPoint() { X = 600, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 750, Y = 250 }, + Type = ConnectorSegmentType.Bezier, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }, + Ports = new DiagramObjectCollection() + { + new ConnectorPort() + { + ID = "port", + Visibility = PortVisibility.Visible, + Shape = PortShapes.Square, + Style = new ShapeStyle(){ Fill = "gray", StrokeColor = "gray" }, + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }; + Connector connector3 = new Connector() + { + ID = "connector3", + SourceID = "connector1", + SourcePortID = "port", + TargetID = "connector2", + TargetPortID = "port", + Type = ConnectorSegmentType.Straight, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }; + + connectors.Add(connector1); + connectors.Add(connector2); + connectors.Add(connector3); + } +} diff --git a/Diagram/Server/Pages/Ports/ConnectorPort/ConnectorPortPathPosition.razor b/Diagram/Server/Pages/Ports/ConnectorPort/ConnectorPortPathPosition.razor new file mode 100644 index 0000000..a2f53c7 --- /dev/null +++ b/Diagram/Server/Pages/Ports/ConnectorPort/ConnectorPortPathPosition.razor @@ -0,0 +1,56 @@ +@page "/ConnectorPortPathPosition" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + //Define diagram's connector collection + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + // A connector is created and stored in connectors collection. + connectors = new DiagramObjectCollection(); + + // Create an orthogonal connector + Connector connector = new Connector() + { + ID = "connector", + SourcePoint = new DiagramPoint() { X = 400, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 550, Y = 350 }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }, + Ports = new DiagramObjectCollection() + { + new ConnectorPort() + { + ID = "port", + Visibility = PortVisibility.Visible, + Shape = PortShapes.Square, + Style = new ShapeStyle(){ Fill = "gray", StrokeColor = "gray" }, + PathPosition = 0 + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/ConnectorPort/CreateConnectorPorts.razor b/Diagram/Server/Pages/Ports/ConnectorPort/CreateConnectorPorts.razor new file mode 100644 index 0000000..90292da --- /dev/null +++ b/Diagram/Server/Pages/Ports/ConnectorPort/CreateConnectorPorts.razor @@ -0,0 +1,55 @@ +@page "/CreateConnectorPorts" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + //Define diagram's connector collection + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + // A connector is created and stored in connectors collection. + connectors = new DiagramObjectCollection(); + + // Create an orthogonal connector + Connector connector = new Connector() + { + ID = "connector", + SourcePoint = new DiagramPoint() { X = 400, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 550, Y = 350 }, + Type = ConnectorSegmentType.Orthogonal, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }, + Ports = new DiagramObjectCollection() + { + new ConnectorPort() + { + ID = "port", + Visibility = PortVisibility.Visible, + Shape = PortShapes.Square, + Style = new ShapeStyle(){ Fill = "gray", StrokeColor = "gray" }, + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/Interaction/ConnectorPortDraw.razor b/Diagram/Server/Pages/Ports/Interaction/ConnectorPortDraw.razor new file mode 100644 index 0000000..786b398 --- /dev/null +++ b/Diagram/Server/Pages/Ports/Interaction/ConnectorPortDraw.razor @@ -0,0 +1,56 @@ +@page "/ConnectorPortDraw" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + //Define diagram's connector collection + DiagramObjectCollection connectors; + + protected override void OnInitialized() + { + // A connector is created and stored in connectors collection. + connectors = new DiagramObjectCollection(); + + // Create an orthogonal connector + Connector connector = new Connector() + { + ID = "connector", + SourcePoint = new DiagramPoint() { X = 400, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 550, Y = 350 }, + Type = ConnectorSegmentType.Bezier, + TargetDecorator = new DecoratorSettings() + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }, + Ports = new DiagramObjectCollection() + { + new ConnectorPort() + { + ID = "port", + Visibility = PortVisibility.Visible, + Shape = PortShapes.Square, + Style = new ShapeStyle(){ Fill = "gray", StrokeColor = "gray" }, + Constraints = PortConstraints.Default | PortConstraints.Draw + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + StrokeWidth = 2 + } + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/Interaction/DrawConstraints.razor b/Diagram/Server/Pages/Ports/Interaction/DrawConstraints.razor new file mode 100644 index 0000000..a79cb94 --- /dev/null +++ b/Diagram/Server/Pages/Ports/Interaction/DrawConstraints.razor @@ -0,0 +1,44 @@ +@page "/DrawConstraints" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Initialize port collection + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + Visibility = PortVisibility.Visible, + //Set the style for the port + Style= new ShapeStyle(){ Fill = "gray", StrokeColor = "black"}, + // Sets the shape of the port as Circle + Width = 12, Height = 12, Shape = PortShapes.Square, + // Enable drag operation for Port + Constraints = PortConstraints.Default|PortConstraints.Draw + } + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/Interaction/DrawConstraintsWithDrawingObject.razor b/Diagram/Server/Pages/Ports/Interaction/DrawConstraintsWithDrawingObject.razor new file mode 100644 index 0000000..252d48c --- /dev/null +++ b/Diagram/Server/Pages/Ports/Interaction/DrawConstraintsWithDrawingObject.razor @@ -0,0 +1,76 @@ +@page "/DrawConstraintsWithDrawingObject" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + IDiagramObject DrawingObject; + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // Nodes are created and stored in nodes array. + Node node1 = new Node() + { + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Initialize port collection. + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + Visibility = PortVisibility.Visible, + //Set the style for the port. + Style= new ShapeStyle(){ Fill = "gray", StrokeColor = "black"}, + // Sets the shape of the port as Circle. + Width = 12, Height = 12, Shape = PortShapes.Square, + // Enable drag operation for Port. + Constraints = PortConstraints.Default|PortConstraints.Draw + } + }, + }; + nodes.Add(node1); + Node node2 = new Node() + { + // Position of the node. + OffsetX = 500, + OffsetY = 350, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Initialize port collection. + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + Visibility = PortVisibility.Visible, + //Set the style for the port. + Style= new ShapeStyle(){ Fill = "gray", StrokeColor = "black"}, + // Sets the shape of the port as Circle. + Width = 12, Height = 12, Shape = PortShapes.Square, + // Enable drag operation for Port. + Constraints = PortConstraints.Default|PortConstraints.Draw + } + }, + }; + nodes.Add(node2); + DrawingObject = new Connector() + { + ID = "connector1", + Type = ConnectorSegmentType.Bezier, + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/NodePortConnection/NodePortConnection.razor b/Diagram/Server/Pages/Ports/NodePortConnection/NodePortConnection.razor new file mode 100644 index 0000000..fdd9ced --- /dev/null +++ b/Diagram/Server/Pages/Ports/NodePortConnection/NodePortConnection.razor @@ -0,0 +1,72 @@ +@page "/NodePortConnection" +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + // Initialize node and connector collections + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + OffsetX = 200, + OffsetY = 200, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + Visibility = PortVisibility.Visible, + Shape = PortShapes.Circle, + } + } + }; + + Node node2 = new Node() + { + ID = "node2", + OffsetX = 400, + OffsetY = 200, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + Visibility = PortVisibility.Visible, + Shape = PortShapes.Circle, + } + } + }; + + // Connector connecting node1's port1 to node2's port1 + Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + SourcePortID = "port1", + TargetID = "node2", + TargetPortID = "port1", + Type = ConnectorSegmentType.Straight, + Style = new ShapeStyle() { StrokeColor = "#6495ED", StrokeWidth = 2 } + }; + + nodes.Add(node1); + nodes.Add(node2); + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/PortIsSticky/PortIsSticky.razor b/Diagram/Server/Pages/Ports/PortIsSticky/PortIsSticky.razor new file mode 100644 index 0000000..9bf1ab2 --- /dev/null +++ b/Diagram/Server/Pages/Ports/PortIsSticky/PortIsSticky.razor @@ -0,0 +1,45 @@ +@page "/PortIsSticky" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + //Reference the diagram + SfDiagramComponent diagram; + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "NodeContent", IsSticky = true }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + Ports = new DiagramObjectCollection() + { + new PointPort(){ + ID="Port1", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + Visibility = PortVisibility.Visible, + Tooltip = new DiagramTooltip(){ Content = "PortContent" , IsSticky = true}, + Constraints = PortConstraints.Default | PortConstraints.Draw + } + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/Positioning/PortHorizontalVerticalAlignment.razor b/Diagram/Server/Pages/Ports/Positioning/PortHorizontalVerticalAlignment.razor new file mode 100644 index 0000000..3a6daa6 --- /dev/null +++ b/Diagram/Server/Pages/Ports/Positioning/PortHorizontalVerticalAlignment.razor @@ -0,0 +1,44 @@ +@page "/PortHorizontalVerticalAlignment" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Initialize port collection + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 0, Y = 0 }, + Visibility = PortVisibility.Visible, + //Set the style for the port + Style= new ShapeStyle(){ Fill="gray", StrokeColor="black"}, + // Sets the shape of the port as Square + Width= 12, Height=12, Shape= PortShapes.Square, + HorizontalAlignment = HorizontalAlignment.Center, + VerticalAlignment = VerticalAlignment.Center + } + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/Positioning/PortMargin.razor b/Diagram/Server/Pages/Ports/Positioning/PortMargin.razor new file mode 100644 index 0000000..d5e285b --- /dev/null +++ b/Diagram/Server/Pages/Ports/Positioning/PortMargin.razor @@ -0,0 +1,46 @@ +@page "/PortMargin" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes array. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Initialize port collection + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 0.5, Y = 1 }, + Visibility = PortVisibility.Visible, + //Set the style for the port + Style= new ShapeStyle(){ Fill="gray", StrokeColor="black"}, + // Sets the shape of the port as Circle + Width= 12, Height=12, Shape= PortShapes.Square, + HorizontalAlignment = HorizontalAlignment.Left, + VerticalAlignment = VerticalAlignment.Top, + //Set port's margin + Margin=new DiagramThickness(){Top=20} + } + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ports/Positioning/PortOffset.razor b/Diagram/Server/Pages/Ports/Positioning/PortOffset.razor new file mode 100644 index 0000000..0983108 --- /dev/null +++ b/Diagram/Server/Pages/Ports/Positioning/PortOffset.razor @@ -0,0 +1,43 @@ +@page "/PortOffset" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in nodes collection. + Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Initialize port collection + Ports = new DiagramObjectCollection() + { + new PointPort() + { + ID = "port1", + //Set port's offset value + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + Visibility = PortVisibility.Visible, + //Set the style for the port + Style= new ShapeStyle(){ Fill="gray", StrokeColor="black"}, + // Sets the shape of the port as Square + Width= 12, Height=12, Shape= PortShapes.Square, + } + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Print/PrintSample.razor b/Diagram/Server/Pages/Print/PrintSample.razor new file mode 100644 index 0000000..1a2e0bd --- /dev/null +++ b/Diagram/Server/Pages/Print/PrintSample.razor @@ -0,0 +1,38 @@ +@page "/PrintSample" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code { + + //Reference the diagram + SfDiagramComponent diagram; + double left = 10; + double top = 10; + double right = 10; + double bottom = 10; + double width = 410; + double height = 550; + bool multiplePage = true; + bool showPageBreak = true; + DiagramPrintExportRegion region = DiagramPrintExportRegion.PageSettings; + PageOrientation orientation = PageOrientation.Portrait; + //Method to prin the diagram + private async Task OnPrint() + { + DiagramPrintSettings print = new DiagramPrintSettings(); + print.PageWidth = width; + print.PageHeight = height; + print.Region = region; + print.FitToPage = multiplePage; + print.Orientation = orientation; + print.Margin = new DiagramThickness() { Left = left, Top = top, Right = right, Bottom = bottom }; + await diagram.PrintAsync(print); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Print/PrintUsingClipBounds.razor b/Diagram/Server/Pages/Print/PrintUsingClipBounds.razor new file mode 100644 index 0000000..39c947b --- /dev/null +++ b/Diagram/Server/Pages/Print/PrintUsingClipBounds.razor @@ -0,0 +1,112 @@ +@page "/PrintUsingClipBounds" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + + + + + + + +@code { + + //Reference the diagram + SfDiagramComponent diagram; + double left = 10; + double top = 10; + double right = 10; + double bottom = 10; + double width = 410; + double height = 550; + + bool multiplePage = true; + bool showPageBreak = true; + DiagramPrintExportRegion region = DiagramPrintExportRegion.ClipBounds; + PageOrientation orientation = PageOrientation.Landscape; + //Method to prin the diagram + private async Task OnPrint() + { + DiagramPrintSettings print = new DiagramPrintSettings(); + print.ClipBounds = new DiagramRect() { Height = 300, Width = 500, X = 300, Y = 200 }; + print.Region = region; + print.FitToPage = multiplePage; + print.Orientation = orientation; + await diagram.PrintAsync(print); + } + + double lTop = 50; + double lBottom = 50; + double lRight = 50; + double lLeft = 50; + LayoutType type = LayoutType.OrganizationalChart; + LayoutOrientation oreintation = LayoutOrientation.TopToBottom; + HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + int HorizontalSpacing = 30; + int VerticalSpacing = 30; + private string FixedNode = null; + public class HierarchicalDetails + { + public string Id { get; set; } + public string Role { get; set; } + public string Manager { get; set; } + public string ChartType { get; set; } + public string Color { get; set; } + } + public List DataSource = new List() + { + new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" } + + }; + + private void NodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data is System.Text.Json.JsonElement) + { + node.Data = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString()); + } + HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails; + node.Width = 150; + node.Height = 50; + node.Style.Fill = hierarchicalData.Color; + // node.IsVisible = false; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = hierarchicalData.Role, + Style =new TextStyle(){Color = "white"} + } + }; + } + private void ConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Ruler/Ruler.razor b/Diagram/Server/Pages/Ruler/Ruler.razor new file mode 100644 index 0000000..3be632f --- /dev/null +++ b/Diagram/Server/Pages/Ruler/Ruler.razor @@ -0,0 +1,30 @@ +@page "/Ruler" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + + +@code +{ + //Reference to diagram. + SfDiagramComponent diagram; + //Defining Ruler Interval of Rulers + public int RulerInterval = 20; + //Defining Tick Alignment of Rulers + public TickAlignment RulerTickAlignment = TickAlignment.RightAndBottom; + //Defining Marker color of Rulers + public string RulerMarkerColor = "green"; + +} + + + diff --git a/Diagram/Server/Pages/ScrollSettings/AutoScrollPadding.razor b/Diagram/Server/Pages/ScrollSettings/AutoScrollPadding.razor new file mode 100644 index 0000000..a4f4350 --- /dev/null +++ b/Diagram/Server/Pages/ScrollSettings/AutoScrollPadding.razor @@ -0,0 +1,36 @@ +@page "/AutoScrollPadding" + +@using Syncfusion.Blazor.Diagram + + @* Sets the ScrollSettings for the diagram *@ + + + +@code +{ + DiagramObjectCollection nodes; + ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity; + DiagramMargin autoScrollBorder = new DiagramMargin() { Left = 30, Right = 30, Top = 30, Bottom = 30 }; + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + // Add node. + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/ScrollSettings/ScrollLimit.razor b/Diagram/Server/Pages/ScrollSettings/ScrollLimit.razor new file mode 100644 index 0000000..b541e60 --- /dev/null +++ b/Diagram/Server/Pages/ScrollSettings/ScrollLimit.razor @@ -0,0 +1,12 @@ +@page "/ScrollLimit" +@using Syncfusion.Blazor.Diagram + + + + + + +@code { + + ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/ScrollSettings/ScrollPadding.razor b/Diagram/Server/Pages/ScrollSettings/ScrollPadding.razor new file mode 100644 index 0000000..0b7af07 --- /dev/null +++ b/Diagram/Server/Pages/ScrollSettings/ScrollPadding.razor @@ -0,0 +1,152 @@ +@page "/ScrollPadding" + +@using Syncfusion.Blazor.Diagram + + @* Sets the ScrollSettings for the diagram *@ + + + +@code +{ + SfDiagramComponent diagram; + DiagramMargin ScrollBorder = new DiagramMargin() { Left = 100, Right = 100, Top = 100, Bottom = 100 }; + DiagramObjectCollection nodes; + DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings(); + DiagramObjectCollection handles = new DiagramObjectCollection(); + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + } + }; + // Add node. + nodes.Add(node); + } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + if (firstRender) + { + UpdateHandle(); + } + } + + private void UpdateHandle() + { + UserHandle deleteHandle = AddHandle("Delete", "delete", Direction.Bottom, 0.5); + UserHandle drawHandle = AddHandle("Draw", "draw", Direction.Right, 0.5); + handles.Add(deleteHandle); + handles.Add(drawHandle); + selectionSettings.UserHandles = handles; + } + + private UserHandle AddHandle(string name, string path, Direction direction, double offset) + { + UserHandle handle = new UserHandle() + { + Name = name, + Visible = true, + Offset = offset, + Side = direction, + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 } + }; + if (path == "delete") + { + handle.PathData = "M0.54700077,2.2130003 L7.2129992,2.2130003 7.2129992,8.8800011 C7.2129992,9.1920013 7.1049975,9.4570007 6.8879985,9.6739998 6.6709994,9.8910007 6.406,10 6.0939997,10 L1.6659999,10 C1.3539997,10 1.0890004,9.8910007 0.87200136,9.6739998 0.65500242,9.4570007 0.54700071,9.1920013 0.54700077,8.8800011 z M2.4999992,0 L5.2600006,0 5.8329986,0.54600048 7.7599996,0.54600048 7.7599996,1.6660004 0,1.6660004 0,0.54600048 1.9270014,0.54600048 z"; + } + else + { + handle.PathData = "M3.9730001,0 L8.9730001,5.0000007 3.9730001,10.000001 3.9730001,7.0090005 0,7.0090005 0,2.9910006 3.9730001,2.9910006 z"; + } + return handle; + } + public InteractionControllerBase GetCustomTool(DiagramElementAction action, string id) + { + InteractionControllerBase tool = null; + if (id == "Draw") + { + tool = new DrawTool(diagram); + } + else + { + tool = new AddDeleteTool(diagram); + } + return tool; + } + // Custom tool to delete the node. + public class AddDeleteTool : InteractionControllerBase + { + SfDiagramComponent sfDiagram; + Node deleteObject = null; + public AddDeleteTool(SfDiagramComponent Diagram) : base(Diagram) + { + sfDiagram = Diagram; + } + public override void OnMouseDown(DiagramMouseEventArgs args) + { + if (sfDiagram.SelectionSettings.Nodes.Count > 0 && ((sfDiagram.SelectionSettings.Nodes[0]) is Node)) + { + deleteObject = (sfDiagram.SelectionSettings.Nodes[0]) as Node; + } + base.OnMouseDown(args); + } + public override void OnMouseUp(DiagramMouseEventArgs args) + { + if (deleteObject != null) + { + sfDiagram.StartGroupAction(); + sfDiagram.BeginUpdate(); + sfDiagram.Nodes.Remove(deleteObject); + _ = sfDiagram.EndUpdateAsync(); + sfDiagram.EndGroupAction(); + } + base.OnMouseUp(args); + this.InAction = true; + } + } + + public class DrawTool : ConnectorDrawingController + { + SfDiagramComponent sfDiagram; + Connector newConnector = null; + public DrawTool(SfDiagramComponent Diagram) : base(Diagram, DiagramElementAction.ConnectorSourceEnd) + { + sfDiagram = Diagram; + newConnector = new Connector() + { + ID = "OrthogonalConnector", + SourceID = sfDiagram.SelectionSettings.Nodes[0].ID, + Type = ConnectorSegmentType.Orthogonal, + }; + @*Hidden:Lines*@ +#pragma warning disable BL0005 + @*End:Hidden*@ + Diagram.InteractionController = DiagramInteractions.DrawOnce; + Diagram.DrawingObject = newConnector; + @*Hidden:Lines*@ +#pragma warning restore BL0005 + @*End:Hidden*@ + } + public override void OnMouseDown(DiagramMouseEventArgs args) + { + base.OnMouseDown(args); + } + public override void OnMouseUp(DiagramMouseEventArgs args) + { + base.OnMouseUp(args); + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/ScrollSettings/ScrollSettingsSample.razor b/Diagram/Server/Pages/ScrollSettings/ScrollSettingsSample.razor new file mode 100644 index 0000000..1f68321 --- /dev/null +++ b/Diagram/Server/Pages/ScrollSettings/ScrollSettingsSample.razor @@ -0,0 +1,8 @@ +@page "/ScrollSettingsSample" +@using Syncfusion.Blazor.Diagram + + + @* Sets the ScrollSettings for the diagram *@ + + + \ No newline at end of file diff --git a/Diagram/Server/Pages/ScrollSettings/ScrollStatus.razor b/Diagram/Server/Pages/ScrollSettings/ScrollStatus.razor new file mode 100644 index 0000000..39533a2 --- /dev/null +++ b/Diagram/Server/Pages/ScrollSettings/ScrollStatus.razor @@ -0,0 +1,24 @@ +@page "/ScrollStatus" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram + + + + @* Sets the ScrollSettings for the diagram *@ + + + + +@code { + //Define horizontaloffset value + public double horizontalOffset { get; set; } = 100; + //Define verticalOffset value + public double verticalOffset { get; set; } = 100; + //Update scrollvalues + public void updateScrollValues() + { + //Update scroll settings. + verticalOffset = 400; + horizontalOffset = 200; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Shapes/BPMNShapeSample.razor b/Diagram/Server/Pages/Shapes/BPMNShapeSample.razor new file mode 100644 index 0000000..7c23dee --- /dev/null +++ b/Diagram/Server/Pages/Shapes/BPMNShapeSample.razor @@ -0,0 +1,35 @@ +@page "/BPMNShapeSample" + + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + +@code +{ + // Initialize node collection with Node. + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 100, + OffsetY = 100, + // Size of the node. + Width = 100, + Height = 100, + // Unique Id of the node. + ID = "node1", + // Sets the shape to activity. + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Shapes/Base64image.razor b/Diagram/Server/Pages/Shapes/Base64image.razor new file mode 100644 index 0000000..4fb6d4a --- /dev/null +++ b/Diagram/Server/Pages/Shapes/Base64image.razor @@ -0,0 +1,34 @@ +@page "/Base64image" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + +@code +{ + //Initialize node collection with node + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + //Size of the node + Height = 100, + Width = 100, + //Position of the node + OffsetX = 100, + OffsetY = 100, + //Sets type of the shape as image + Shape = new ImageShape() + { + Type = NodeShapes.Image, + Source = "data:image/gif;base64,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" + }, + Style = new ShapeStyle() { StrokeColor = "White" } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Shapes/BasicShapeSample.razor b/Diagram/Server/Pages/Shapes/BasicShapeSample.razor new file mode 100644 index 0000000..a2677cb --- /dev/null +++ b/Diagram/Server/Pages/Shapes/BasicShapeSample.razor @@ -0,0 +1,30 @@ +@page "/BasicShape" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + +@code +{ + //Initialize node collection with node + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + //Size of the node + Height = 100, + Width = 100, + //Position of the node + OffsetX = 100, + OffsetY = 100, + //sets the type of the shape as basic + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 10 }, + Style = new ShapeStyle() { Fill = "#6495ED" } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Shapes/FlowShapeSample.razor b/Diagram/Server/Pages/Shapes/FlowShapeSample.razor new file mode 100644 index 0000000..df21ac1 --- /dev/null +++ b/Diagram/Server/Pages/Shapes/FlowShapeSample.razor @@ -0,0 +1,33 @@ +@page "/FlowShape" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + +@code +{ + //Initialize node collection with node + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + //Size of the node + Height = 100, + Width = 100, + //Position of the node + OffsetX = 100, + OffsetY = 100, + //Sets the type of the shape as flow + Shape = new FlowShape() + { + Type = NodeShapes.Flow, + Shape = NodeFlowShapes.DirectData + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Shapes/ImageAlign.razor b/Diagram/Server/Pages/Shapes/ImageAlign.razor new file mode 100644 index 0000000..b687d11 --- /dev/null +++ b/Diagram/Server/Pages/Shapes/ImageAlign.razor @@ -0,0 +1,36 @@ +@page "/ImageAlign" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Intialize diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + //Size of the node + Height = 100, + Width = 100, + //Position of the node + OffsetX = 100, + OffsetY = 100, + Shape = new ImageShape() + { + Type = NodeShapes.Image, + Source = "/diagram/images/productmanager.png", + Scale = DiagramScale.Meet, + ImageAlign = ImageAlignment.XMinYMax + } + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Shapes/ImageShapeSample.razor b/Diagram/Server/Pages/Shapes/ImageShapeSample.razor new file mode 100644 index 0000000..eea1fcc --- /dev/null +++ b/Diagram/Server/Pages/Shapes/ImageShapeSample.razor @@ -0,0 +1,32 @@ +@page "/ImageShape" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + //Size of the node + Height = 100, + Width = 100, + //Position of the node + OffsetX = 100, + OffsetY = 100, + Shape = new ImageShape() + { + Type = NodeShapes.Image, + Source = "/diagram/images/productmanager.png" + } + }; + nodes.Add(node); + } +} diff --git a/Diagram/Server/Pages/Shapes/PathShapeSample.razor b/Diagram/Server/Pages/Shapes/PathShapeSample.razor new file mode 100644 index 0000000..1d8b8bd --- /dev/null +++ b/Diagram/Server/Pages/Shapes/PathShapeSample.razor @@ -0,0 +1,36 @@ +@page "/PathShape" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + + +@code +{ + //Initialize node collection with node + DiagramObjectCollection NodeCollection = new DiagramObjectCollection() + { + // Creates a path node + new Node() + { + ID="node1", + //Size of the node + Height=100, + Width=100, + //Position of the node + OffsetX=100, + OffsetY=100, + //Sets the type of the shape as path + Shape=new PathShape() + { + Type=NodeShapes.Path, + Data="M 355.31 12.07 C 352.11 5.95 345.35 -1.14 331.41 0.15 C 290.33 3.93 209.61 81.48 190.42 111.69 C 189.66 107.76 187.9 101.49 184.12 98.05 C 189.5 87.75 198.01 69.64 201.57 52.48 C 202.4 52.26 203.12 51.68 203.34 50.44 C 203.72 48.34 204 46.22 204.39 44.13 C 205.01 40.62 199.99 39.43 199.42 42.91 C 199.06 45.06 198.69 47.15 198.35 49.31 C 198.16 50.6 198.69 51.62 199.54 52.14 C 196.08 68.87 187.75 86.63 182.43 96.81 C 181.52 96.29 180.53 95.87 179.41 95.7 C 179.09 95.65 178.8 95.72 178.5 95.71 C 178.19 95.72 177.91 95.65 177.59 95.7 C 176.46 95.87 175.48 96.29 174.56 96.81 C 169.24 86.63 160.92 68.87 157.46 52.14 C 158.3 51.62 158.83 50.6 158.65 49.31 C 158.3 47.15 157.93 45.06 157.58 42.91 C 157.01 39.43 151.99 40.62 152.61 44.13 C 152.99 46.22 153.28 48.34 153.66 50.44 C 153.87 51.68 154.6 52.27 155.42 52.48 C 158.98 69.63 167.49 87.75 172.87 98.05 C 169.09 101.49 167.33 107.76 166.57 111.69 C 147.39 81.48 66.67 3.93 25.59 0.15 C 11.65 -1.14 4.89 5.95 1.69 12.07 C -2.05 19.07 0.84 33.48 6.24 58.46 C 8.66 69.55 11.16 80.96 12.94 92.2 C 13.89 98.36 14.79 104.49 15.64 110.36 C 19.39 136.89 22.52 158.97 32.64 166.04 C 35.41 167.98 38.65 168.78 42.61 168.24 C 52.26 165.95 63.79 164.03 75.99 162.67 C 64.03 171.47 49.08 185.81 44.17 204.84 C 40.38 219.72 43.37 234.86 53.01 250.05 C 64.37 267.81 76.02 279.48 86.91 287.09 C 108.68 302.31 127.52 301.24 135.48 300.78 C 136.3 300.77 136.94 300.71 137.56 300.69 C 143.62 300.61 147.76 291.39 156.6 270.51 C 160.94 260.34 167.39 245.19 172.83 237.47 C 173.97 240.31 177.22 242.31 178.92 242.87 C 178.78 242.94 178.62 243.07 178.49 243.12 C 178.65 243.08 178.83 242.97 179 242.91 C 179.1 242.94 179.25 243.02 179.34 243.04 C 179.26 243.01 179.13 242.93 179.04 242.89 C 180.83 242.24 183.05 240.25 184.16 237.48 C 189.6 245.19 196.05 260.34 200.39 270.52 C 209.23 291.4 213.38 300.61 219.43 300.7 C 220.05 300.72 220.69 300.77 221.51 300.78 C 229.47 301.25 248.31 302.31 270.08 287.1 C 280.97 279.49 292.62 267.81 303.98 250.05 C 313.62 234.86 316.6 219.72 312.82 204.84 C 307.91 185.82 292.96 171.48 281 162.67 C 293.2 164.03 304.73 165.95 314.38 168.24 C 318.34 168.78 321.58 167.98 324.35 166.04 C 334.47 158.97 337.6 136.89 341.35 110.37 C 342.19 104.49 343.1 98.37 344.05 92.2 C 345.83 80.96 348.33 69.55 350.75 58.46 C 356.16 33.48 359.05 19.07 355.31 12.07 z M 183.92 237.56 C 182.35 240.3 180.35 242.13 178.97 242.86 C 177.49 242.19 174.7 240.38 173.08 237.56 C 173.08 237.56 166.19 138.22 166.91 113.58 C 166.91 113.58 169.24 97.92 178.5 97.81 C 187.76 97.92 190.09 113.58 190.09 113.58 C 190.81 138.22 183.92 237.56 183.92 237.56 z" + }, + Style=new ShapeStyle() + { + Fill="Orange" + } + } + }; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Shapes/SVGShape.razor b/Diagram/Server/Pages/Shapes/SVGShape.razor new file mode 100644 index 0000000..d22ebc1 --- /dev/null +++ b/Diagram/Server/Pages/Shapes/SVGShape.razor @@ -0,0 +1,47 @@ +@page "/SVGShape" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + + + + @{ + if ((context as Node).Shape.Type == NodeShapes.SVG) + { + + + + + + + + } + } + + + + + @code + { + //Initialize node collection with node + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + // Size of the node + Height = 100, + Width = 100, + // Position of the node + OffsetX = 100, + OffsetY = 100, + //Sets type of the shape as Native + Shape = new Shape() { Type = NodeShapes.SVG }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Shapes/TextNodeSample.razor b/Diagram/Server/Pages/Shapes/TextNodeSample.razor new file mode 100644 index 0000000..a45f8a5 --- /dev/null +++ b/Diagram/Server/Pages/Shapes/TextNodeSample.razor @@ -0,0 +1,35 @@ +@page "/TextNode" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + + //Intialize diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + //Size of the node. + Height = 100, + Width = 100, + //Position of the node. + OffsetX = 100, + OffsetY = 100, + Shape = new TextShape() + { + //Set the Content of the text shape. + Content = "Text Node" + }, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/BezierConnector.razor b/Diagram/Server/Pages/Style/BezierConnector.razor new file mode 100644 index 0000000..755d108 --- /dev/null +++ b/Diagram/Server/Pages/Style/BezierConnector.razor @@ -0,0 +1,30 @@ +@page "/BezierConnector" + +@using Syncfusion.Blazor.Diagram + + + +@code { + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + Type=ConnectorSegmentType.Bezier, + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/BezierConnectorLine.razor b/Diagram/Server/Pages/Style/BezierConnectorLine.razor new file mode 100644 index 0000000..ee77913 --- /dev/null +++ b/Diagram/Server/Pages/Style/BezierConnectorLine.razor @@ -0,0 +1,29 @@ +@page "/BezierConnectorLine" + +@using Syncfusion.Blazor.Diagram + + + +@code { + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + Type=ConnectorSegmentType.Bezier, + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/ConnectorendPointHandle.razor b/Diagram/Server/Pages/Style/ConnectorendPointHandle.razor new file mode 100644 index 0000000..db8fb35 --- /dev/null +++ b/Diagram/Server/Pages/Style/ConnectorendPointHandle.razor @@ -0,0 +1,29 @@ +@page "/ConnectorendPointHandle" + +@using Syncfusion.Blazor.Diagram + + + +@code { + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/ConnectorendPointHandleConnected.razor b/Diagram/Server/Pages/Style/ConnectorendPointHandleConnected.razor new file mode 100644 index 0000000..ca5f582 --- /dev/null +++ b/Diagram/Server/Pages/Style/ConnectorendPointHandleConnected.razor @@ -0,0 +1,47 @@ +@page "/ConnectorendPointHandleConnected" + +@using Syncfusion.Blazor.Diagram + + + +@code { + //Define diagram's nodes collection + DiagramObjectCollection nodes; + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + }; + connectors.Add(Connector); + + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/ConnectorendPointHandleDisable.razor b/Diagram/Server/Pages/Style/ConnectorendPointHandleDisable.razor new file mode 100644 index 0000000..9fd4ba5 --- /dev/null +++ b/Diagram/Server/Pages/Style/ConnectorendPointHandleDisable.razor @@ -0,0 +1,31 @@ +@page "/ConnectorendPointHandleDisable" + +@using Syncfusion.Blazor.Diagram + + + +@code { + //Defines diagram's connector collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "connector1", + Constraints = ConnectorConstraints.Default & ~ConnectorConstraints.DragSourceEnd, + SourcePoint = new DiagramPoint() + { + X = 100, + Y = 100 + }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/DiagramBackground.razor b/Diagram/Server/Pages/Style/DiagramBackground.razor new file mode 100644 index 0000000..6715400 --- /dev/null +++ b/Diagram/Server/Pages/Style/DiagramBackground.razor @@ -0,0 +1,48 @@ +@page "/DiagramBackground" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + Node node2 = new Node() + { + ID = "node2", + // Position of the node + OffsetX = 250, + OffsetY = 400, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + nodes.Add(node2); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/HelperCustomization.razor b/Diagram/Server/Pages/Style/HelperCustomization.razor new file mode 100644 index 0000000..9bd8ee3 --- /dev/null +++ b/Diagram/Server/Pages/Style/HelperCustomization.razor @@ -0,0 +1,37 @@ +@page "/HelperCustomization" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/Highlighter.razor b/Diagram/Server/Pages/Style/Highlighter.razor new file mode 100644 index 0000000..7cd699b --- /dev/null +++ b/Diagram/Server/Pages/Style/Highlighter.razor @@ -0,0 +1,55 @@ +@page "/Highlighter" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Constraints=NodeConstraints.Default| NodeConstraints.AllowDrop, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + Node node2 = new Node() + { + ID = "node2", + // Position of the node + OffsetX = 250, + OffsetY = 400, + // Size of the node + Width = 100, + Height = 100, + Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + nodes.Add(node2); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/OrthogonalThumbStyle.razor b/Diagram/Server/Pages/Style/OrthogonalThumbStyle.razor new file mode 100644 index 0000000..c830679 --- /dev/null +++ b/Diagram/Server/Pages/Style/OrthogonalThumbStyle.razor @@ -0,0 +1,35 @@ +@page "/OrthogonalThumbStyle" + +@using Syncfusion.Blazor.Diagram + + + + + + +@code +{ + SfDiagramComponent Diagram; + DiagramObjectCollection connectors = new DiagramObjectCollection(); + SegmentThumbSettings segmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.DoubleArrow }; + + protected override void OnInitialized() + { + Connector Connector = new Connector() + { + ID = "Connector2", + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape, + Type = ConnectorSegmentType.Orthogonal, + SourcePoint = new DiagramPoint { X = 400, Y = 100 }, + TargetPoint = new DiagramPoint { X = 500, Y = 200 } + }; + connectors.Add(Connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/OverviewResizer.razor b/Diagram/Server/Pages/Style/OverviewResizer.razor new file mode 100644 index 0000000..3b82e35 --- /dev/null +++ b/Diagram/Server/Pages/Style/OverviewResizer.razor @@ -0,0 +1,81 @@ +@page "/OverviewResizer" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.Overview +@using System.Collections.ObjectModel + + + + + + + + + +@code { + SfDiagramComponent Diagram; + private void ConnectorCreating(IDiagramObject connector) + { + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; + (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6d6d6d" }; + (connector as Connector).Constraints = 0; + (connector as Connector).CornerRadius = 5; + } + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) + { + options.EnableSubTree = true; + options.Orientation = Orientation.Horizontal; + return options; + } + private void NodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data is System.Text.Json.JsonElement) + { + node.Data = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString()); + } + HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails; + node.Style = new ShapeStyle() { Fill = "#659be5", StrokeColor = "none", StrokeWidth = 2, }; + node.BackgroundColor = "#659be5"; + node.Width = 150; + node.Height = 50; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = hierarchicalData.Name, + Style =new TextStyle(){Color = "white"} + } + }; + } + //Create the hierarchical details with needed properties. + public class HierarchicalDetails + { + public string Name { get; set; } + public string FillColor { get; set; } + public string Category { get; set; } + } + //Create the data source with node name and fill color values. + public List DataSource = new List() +{ + new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"} +}; +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/PageBreak.razor b/Diagram/Server/Pages/Style/PageBreak.razor new file mode 100644 index 0000000..a27ad24 --- /dev/null +++ b/Diagram/Server/Pages/Style/PageBreak.razor @@ -0,0 +1,49 @@ +@page "/StylePageBreak" + +@using Syncfusion.Blazor.Diagram + + + + @*Set the page background color*@ + + + + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Tooltip = new DiagramTooltip() { Content = "NodeTooltip" }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/ResizeHandle.razor b/Diagram/Server/Pages/Style/ResizeHandle.razor new file mode 100644 index 0000000..8c9ad4a --- /dev/null +++ b/Diagram/Server/Pages/Style/ResizeHandle.razor @@ -0,0 +1,36 @@ +@page "/ResizeHandle" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/RotateHandle.razor b/Diagram/Server/Pages/Style/RotateHandle.razor new file mode 100644 index 0000000..835da19 --- /dev/null +++ b/Diagram/Server/Pages/Style/RotateHandle.razor @@ -0,0 +1,35 @@ +@page "/RotateHandle" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/RulerCustomize.razor b/Diagram/Server/Pages/Style/RulerCustomize.razor new file mode 100644 index 0000000..60f4b11 --- /dev/null +++ b/Diagram/Server/Pages/Style/RulerCustomize.razor @@ -0,0 +1,42 @@ +@page "/RulerCustomize" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/RulerOverlap.razor b/Diagram/Server/Pages/Style/RulerOverlap.razor new file mode 100644 index 0000000..1370a09 --- /dev/null +++ b/Diagram/Server/Pages/Style/RulerOverlap.razor @@ -0,0 +1,41 @@ +@page "/RulerOverlap" + +@using Syncfusion.Blazor.Diagram + + + + + + + + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/SelectorBorder.razor b/Diagram/Server/Pages/Style/SelectorBorder.razor new file mode 100644 index 0000000..bc600b0 --- /dev/null +++ b/Diagram/Server/Pages/Style/SelectorBorder.razor @@ -0,0 +1,34 @@ +@page "/SelectorBorder" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/SelectorPivotLine.razor b/Diagram/Server/Pages/Style/SelectorPivotLine.razor new file mode 100644 index 0000000..4a3d7a2 --- /dev/null +++ b/Diagram/Server/Pages/Style/SelectorPivotLine.razor @@ -0,0 +1,34 @@ +@page "/SelectorPivotLine" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/SymbolPalette.razor b/Diagram/Server/Pages/Style/SymbolPalette.razor new file mode 100644 index 0000000..ce292c3 --- /dev/null +++ b/Diagram/Server/Pages/Style/SymbolPalette.razor @@ -0,0 +1,119 @@ +@page "/SymbolPalette" + +@using Syncfusion.Blazor.Diagram + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfSymbolPaletteComponent Palette; + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + // Defines palette's group collection. + DiagramObjectCollection PaletteGroup = new DiagramObjectCollection(); + // Defines palette's connector collection. + DiagramObjectCollection PaletteConnectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow); + CreatePaletteGroup(); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Flow Shapes", ID = "Flow Shapes" }, + new Palette(){Symbols = PaletteConnectors,Title = "Connectors", IsExpanded = true}, + new Palette(){Symbols = PaletteGroup,Title = "Group Shapes", IsExpanded = true} + }; + } + + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + + private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape) + { + Connector connector = new Connector() + { + ID = id, + Type = type, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575" }, + TargetDecorator = new DecoratorSettings() + { + Shape = decoratorShape, + Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" } + } + }; + PaletteConnectors.Add(connector); + } + + private void CreatePaletteGroup() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + PaletteGroup.Add(node1); + PaletteGroup.Add(node2); + NodeGroup group = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" } + }; + PaletteGroup.Add(group); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/SymbolPaletteHover.razor b/Diagram/Server/Pages/Style/SymbolPaletteHover.razor new file mode 100644 index 0000000..1900312 --- /dev/null +++ b/Diagram/Server/Pages/Style/SymbolPaletteHover.razor @@ -0,0 +1,119 @@ +@page "/SymbolPaletteHover" + +@using Syncfusion.Blazor.Diagram + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfSymbolPaletteComponent SymbolPalette; + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + // Defines palette's group collection. + DiagramObjectCollection PaletteGroup = new DiagramObjectCollection(); + // Defines palette's connector collection. + DiagramObjectCollection PaletteConnectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow); + CreatePaletteGroup(); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Flow Shapes", ID = "Flow Shapes" }, + new Palette(){Symbols = PaletteConnectors,Title = "Connectors", IsExpanded = true}, + new Palette(){Symbols = PaletteGroup,Title = "Group Shapes", IsExpanded = true} + }; + } + + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + + private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape) + { + Connector connector = new Connector() + { + ID = id, + Type = type, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575" }, + TargetDecorator = new DecoratorSettings() + { + Shape = decoratorShape, + Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" } + } + }; + PaletteConnectors.Add(connector); + } + + private void CreatePaletteGroup() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + PaletteGroup.Add(node1); + PaletteGroup.Add(node2); + NodeGroup group = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" } + }; + PaletteGroup.Add(group); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/SymbolPaletteSelect.razor b/Diagram/Server/Pages/Style/SymbolPaletteSelect.razor new file mode 100644 index 0000000..acf7673 --- /dev/null +++ b/Diagram/Server/Pages/Style/SymbolPaletteSelect.razor @@ -0,0 +1,119 @@ +@page "/SymbolPaletteSelect" + +@using Syncfusion.Blazor.Diagram + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfSymbolPaletteComponent SymbolPalette; + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + // Defines palette's group collection. + DiagramObjectCollection PaletteGroup = new DiagramObjectCollection(); + // Defines palette's connector collection. + DiagramObjectCollection PaletteConnectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow); + CreatePaletteGroup(); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Flow Shapes", ID = "Flow Shapes" }, + new Palette(){Symbols = PaletteConnectors,Title = "Connectors", IsExpanded = true}, + new Palette(){Symbols = PaletteGroup,Title = "Group Shapes", IsExpanded = true} + }; + } + + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + + private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape) + { + Connector connector = new Connector() + { + ID = id, + Type = type, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575" }, + TargetDecorator = new DecoratorSettings() + { + Shape = decoratorShape, + Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" } + } + }; + PaletteConnectors.Add(connector); + } + + private void CreatePaletteGroup() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + PaletteGroup.Add(node1); + PaletteGroup.Add(node2); + NodeGroup group = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" } + }; + PaletteGroup.Add(group); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/TextEdit.razor b/Diagram/Server/Pages/Style/TextEdit.razor new file mode 100644 index 0000000..bc3b90e --- /dev/null +++ b/Diagram/Server/Pages/Style/TextEdit.razor @@ -0,0 +1,41 @@ +@page "/TextEdit" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/TextEditSelection.razor b/Diagram/Server/Pages/Style/TextEditSelection.razor new file mode 100644 index 0000000..760ff02 --- /dev/null +++ b/Diagram/Server/Pages/Style/TextEditSelection.razor @@ -0,0 +1,36 @@ +@page "/TextEditSelection" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Style/ThickGrid.razor b/Diagram/Server/Pages/Style/ThickGrid.razor new file mode 100644 index 0000000..d0d600d --- /dev/null +++ b/Diagram/Server/Pages/Style/ThickGrid.razor @@ -0,0 +1,13 @@ +@page "/ThickGrid" + +@using Syncfusion.Blazor.Diagram + + + + diff --git a/Diagram/Server/Pages/Style/ThinGrid.razor b/Diagram/Server/Pages/Style/ThinGrid.razor new file mode 100644 index 0000000..4e3a520 --- /dev/null +++ b/Diagram/Server/Pages/Style/ThinGrid.razor @@ -0,0 +1,13 @@ +@page "/ThinGrid" + +@using Syncfusion.Blazor.Diagram + + + + diff --git a/Diagram/Server/Pages/Swimlanes/ChildrenSpacingProperty/ChildrenSpacingProperty.razor b/Diagram/Server/Pages/Swimlanes/ChildrenSpacingProperty/ChildrenSpacingProperty.razor new file mode 100644 index 0000000..ae2bfea --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/ChildrenSpacingProperty/ChildrenSpacingProperty.razor @@ -0,0 +1,106 @@ +@page "/ChildrenSpacingProperty" + + +@using Syncfusion.Blazor.Diagram + + + + + +@code { + /// + /// Collection of swimlanes used in the SfDiagramComponent. + /// + DiagramObjectCollection swimlaneCollections = new DiagramObjectCollection(); + + /// + /// Initializes the swimlane, phases, lanes, and child nodes for the diagram. + /// + protected override void OnInitialized() + { + // Define the first node + Node node1 = new Node() + { + ID = "node1", + Height = 100, + Width = 100, + OffsetX = 100, + OffsetY = 100, + }; + + // Define the second node + Node node2 = new Node() + { + ID = "node2", + Height = 100, + Width = 100, + OffsetX = 300, + OffsetY = 100, + }; + + // Create swimlane structure + swimlaneCollections = new DiagramObjectCollection() + { + new Swimlane() + { + ID = "swimlane1", + Height = 200, + Width = 450, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "Header of swimlane" + }, + Height = 30 + }, + + Phases = new DiagramObjectCollection() + { + new Phase() + { + + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "Header of phase" + } + }, + Width = 450 + } + }, + + Lanes = new DiagramObjectCollection() + { + + new Lane() + { + Header = new SwimlaneHeader() + { + Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }, + Annotation = new ShapeAnnotation() + { + Content = "Header of lane" + } + }, + Height = 100, + Children = new DiagramObjectCollection() + { + node1, + node2 + } + } + }, + + ChildrenSpacing = new DiagramThickness() + { + Bottom = 10, + Left = 10, + Right = 10, + Top = 10 + } + } + }; + } +} diff --git a/Diagram/Server/Pages/Swimlanes/Lane/AddRemoveLaneAtRuntime.razor b/Diagram/Server/Pages/Swimlanes/Lane/AddRemoveLaneAtRuntime.razor new file mode 100644 index 0000000..307d048 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Lane/AddRemoveLaneAtRuntime.razor @@ -0,0 +1,85 @@ +@page "/AddRemoveLaneAtRuntime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART" + }, + Height = 50, + }, + OffsetX = 400, + OffsetY = 200, + Height = 120, + Width = 450, + Lanes = new DiagramObjectCollection() + { + new Lane(){Height = 100, + Header = new SwimlaneHeader(){ + Width = 30, + Annotation = new ShapeAnnotation(){ Content = "Consumer" } + } }, + } + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void AddLane() + { + Lane newLane = new Lane() + { + Height = 100, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() { Content = "Lane title" }, + Width = 30, + Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } + } + }; + SwimlaneCollections[0].Lanes.Add(newLane); + } + + private void RemoveLane() + { + Lane lane = SwimlaneCollections[0].Lanes[^1]; + SwimlaneCollections[0].Lanes.Remove(lane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} diff --git a/Diagram/Server/Pages/Swimlanes/Lane/LaneChildren.razor b/Diagram/Server/Pages/Swimlanes/Lane/LaneChildren.razor new file mode 100644 index 0000000..98702cd --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Lane/LaneChildren.razor @@ -0,0 +1,75 @@ +@page "/LaneChildren" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART" + }, + Height = 50, + }, + OffsetX = 400, + OffsetY = 200, + Height = 120, + Width = 450, + Lanes = new DiagramObjectCollection() + { + new Lane(){Height = 100, + Header = new SwimlaneHeader(){ + Width = 30, + Annotation = new ShapeAnnotation(){ Content = "Consumer" } + }, + Children = new DiagramObjectCollection() + { + new Node(){Height = 50, Width = 50, LaneOffsetX = 100, LaneOffsetY = 30}, + new Node(){Height = 50, Width = 50, LaneOffsetX = 250, LaneOffsetY = 30}, + } + }, + } + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + else if (obj is Node node) + { + node.Style = new ShapeStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + } + } +} diff --git a/Diagram/Server/Pages/Swimlanes/Lane/LaneCreation.razor b/Diagram/Server/Pages/Swimlanes/Lane/LaneCreation.razor new file mode 100644 index 0000000..46a22d5 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Lane/LaneCreation.razor @@ -0,0 +1,57 @@ +@page "/LaneCreation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART" + }, + Height = 50, + }, + OffsetX = 400, + OffsetY = 200, + Height = 120, + Width = 450, + Lanes = new DiagramObjectCollection() + { + new Lane(){Height = 100}, + } + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Swimlanes/Lane/LaneHeader.razor b/Diagram/Server/Pages/Swimlanes/Lane/LaneHeader.razor new file mode 100644 index 0000000..b977862 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Lane/LaneHeader.razor @@ -0,0 +1,58 @@ +@page "/LaneHeader" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART" + }, + Height = 50, + }, + OffsetX = 400, + OffsetY = 200, + Height = 120, + Width = 450, + Lanes = new DiagramObjectCollection() + { + new Lane(){Height = 100, + Header = new SwimlaneHeader(){ + Width = 30, + Style = new TextStyle(){ Fill = "Teal"}, + Annotation = new ShapeAnnotation(){ Content = "Consumer", Style = new TextStyle(){ Color = "White", TextDecoration = TextDecoration.Underline, Italic = true, Bold = true} } + } }, + } + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Swimlanes/Lane/LaneHeaderTemplate.razor b/Diagram/Server/Pages/Swimlanes/Lane/LaneHeaderTemplate.razor new file mode 100644 index 0000000..288f768 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Lane/LaneHeaderTemplate.razor @@ -0,0 +1,85 @@ +@page "/LaneHeaderTemplate" + +@using Syncfusion.Blazor.Diagram + + + + + @if (context is Annotation annotation) + { + if (annotation.ID == "Lane 1") + { + string ID = annotation.ID + "TemplateContent"; +
+ + + + + + +
Users
+
+ } + } + + + + +@code +{ + //Define diagram's swimlane collection. + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART" + }, + Height = 50, + }, + OffsetX = 400, + OffsetY = 200, + Height = 120, + Width = 450, + Lanes = new DiagramObjectCollection() + { + new Lane(){Height = 100, + Header = new SwimlaneHeader(){ + Width = 30, + Style = new TextStyle(){ Fill = "Teal"}, + Annotation = new ShapeAnnotation(){ + ID="Lane 1", + Content = "Lane 1", + UseTemplate = true, + Height = 50, + Width = 75, + }, + } }, + } + }; + // Add swimlane. + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Swimlanes/Lane/LaneOrientation.razor b/Diagram/Server/Pages/Swimlanes/Lane/LaneOrientation.razor new file mode 100644 index 0000000..cb9cd44 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Lane/LaneOrientation.razor @@ -0,0 +1,89 @@ +@page "/LaneOrientation" + + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + //Reference the symbolpreview. + DiagramSize SymbolPreview; + //Define symbol margin. + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's swimlane-shape collection. + DiagramObjectCollection SwimlaneNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + Palettes = new DiagramObjectCollection(); + + SwimlaneNodes = new DiagramObjectCollection(); + + //create a horizontal lane. + Lane horizontalLane = new Lane() + { + ID = "HorizontalSwimlane", + Orientation = Orientation.Horizontal, + Height = 100, + Width = 150, + // Style = new TextStyle() { Fill = "orange", StrokeColor = "black" }, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() { Content = "Lane Title" }, + Style = new TextStyle() { Fill = "lightblue", StrokeColor = "black" }, + Width = 25, + Height = 100 + }, + }; + + //create a vertical lane. + Lane verticalLane = new Lane() + { + ID = "VerticalSwimlane", + Orientation = Orientation.Vertical, + Height = 150, + Width = 100, + // Style = new TextStyle() { Fill = "orange", StrokeColor = "black" }, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() { Content = "Lane Title" }, + Style = new TextStyle() { Fill = "lightblue", StrokeColor = "black" }, + Width = 100, + Height = 25 + }, + }; + + + SwimlaneNodes = new DiagramObjectCollection() + { + horizontalLane, + verticalLane, + }; + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =SwimlaneNodes,Title="Swimlane Shapes",ID="SwimlaneShapes" }, + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Swimlanes/Phase/AddRemovePhaseAtRuntime.razor b/Diagram/Server/Pages/Swimlanes/Phase/AddRemovePhaseAtRuntime.razor new file mode 100644 index 0000000..52a0961 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Phase/AddRemovePhaseAtRuntime.razor @@ -0,0 +1,90 @@ +@page "/AddRemovePhaseAtRuntime" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART" + }, + Height = 50, + }, + OffsetX = 400, + OffsetY = 200, + Height = 150, + Width = 450, + Phases = new DiagramObjectCollection() + { + new Phase() + { + Width = 450, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation(){Content = "Phase 1"}, + Height = 30 + } + } + } + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void AddPhase() + { + Swimlane swimlane = SwimlaneCollections[0]; + Phase newPhase = new Phase() + { + Width = 100, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() { Content = "Phase " + (swimlane.Phases.Count + 1) }, + Height = 30, + }, + Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } + }; + swimlane.Phases.Add(newPhase); + } + + private void RemovePhase() + { + Swimlane swimlane = SwimlaneCollections[0]; + if (swimlane.Phases.Count > 1) + swimlane.Phases.RemoveAt(swimlane.Phases.Count - 1); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} diff --git a/Diagram/Server/Pages/Swimlanes/Phase/PhaseCreation.razor b/Diagram/Server/Pages/Swimlanes/Phase/PhaseCreation.razor new file mode 100644 index 0000000..0ace397 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Phase/PhaseCreation.razor @@ -0,0 +1,64 @@ +@page "/PhaseCreation" +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART" + }, + Height = 50, + }, + OffsetX = 400, + OffsetY = 200, + Height = 150, + Width = 450, + Phases = new DiagramObjectCollection() + { + new Phase() + { + Width = 450, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation(){Content = "Phase 1"}, + Height = 30 + } + } + } + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} diff --git a/Diagram/Server/Pages/Swimlanes/Phase/PhaseHeader.razor b/Diagram/Server/Pages/Swimlanes/Phase/PhaseHeader.razor new file mode 100644 index 0000000..3096a59 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Phase/PhaseHeader.razor @@ -0,0 +1,61 @@ +@page "/PhaseHeader" +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART" + }, + Height = 50, + }, + OffsetX = 400, + OffsetY = 200, + Height = 150, + Width = 450, + Phases = new DiagramObjectCollection() + { + new Phase() + { + Width = 450, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation(){Content = "Phase 1", Style = new TextStyle(){ Color = "White", TextDecoration = TextDecoration.Underline, Italic = true, Bold = true} }, + Height = 30 + }, + Style = new TextStyle(){Fill = "Teal"}, + } + } + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} diff --git a/Diagram/Server/Pages/Swimlanes/Phase/PhaseHeaderTemplate.razor b/Diagram/Server/Pages/Swimlanes/Phase/PhaseHeaderTemplate.razor new file mode 100644 index 0000000..7a723dd --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Phase/PhaseHeaderTemplate.razor @@ -0,0 +1,87 @@ +@page "/PhaseHeaderTemplate" +@using Syncfusion.Blazor.Diagram + + + + + @if (context is Annotation annotation) + { + if (annotation.ID == "Phase 1") + { + string ID = annotation.ID + "TemplateContent"; +
+ + + + + + +
Users
+
+ } + } + + + + +@code +{ + //Define diagram's swimlane collection. + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART" + }, + Height = 50, + }, + OffsetX = 400, + OffsetY = 200, + Height = 150, + Width = 450, + Phases = new DiagramObjectCollection() + { + new Phase() + { + Width = 450, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation(){ ID="Phase 1", + Content = "Phase 1", + UseTemplate = true, + Height = 50, + Width = 75, + }, + Height = 30, + }, + Style = new TextStyle(){Fill = "Teal"}, + } + } + }; + // Add swimlane. + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} diff --git a/Diagram/Server/Pages/Swimlanes/Phase/PhaseOrientation.razor b/Diagram/Server/Pages/Swimlanes/Phase/PhaseOrientation.razor new file mode 100644 index 0000000..9a24542 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/Phase/PhaseOrientation.razor @@ -0,0 +1,61 @@ +@page "/PhaseOrientation" + + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + //Reference the symbolpreview. + DiagramSize SymbolPreview; + //Define symbol margin. + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's swimlane-shape collection. + DiagramObjectCollection SwimlaneNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + Palettes = new DiagramObjectCollection(); + + SwimlaneNodes = new DiagramObjectCollection(); + + + //create a horizontal phase. + Phase horizontalPhase = new Phase() { ID = "HorizontalPhase", Orientation = Orientation.Horizontal, Width = 80, Height = 1, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } }; + + //create a vertical phase. + Phase verticalPhase = new Phase() { ID = "VerticalPhase", Orientation = Orientation.Vertical, Width = 1, Height = 80, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } }; + + SwimlaneNodes = new DiagramObjectCollection() + { + horizontalPhase, + verticalPhase + }; + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =SwimlaneNodes,Title="Swimlane Shapes",ID="SwimlaneShapes" }, + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Swimlanes/SwimlaneCreation/SwimlaneCreation.razor b/Diagram/Server/Pages/Swimlanes/SwimlaneCreation/SwimlaneCreation.razor new file mode 100644 index 0000000..122b11c --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/SwimlaneCreation/SwimlaneCreation.razor @@ -0,0 +1,45 @@ +@page "/SwimlaneCreation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + OffsetX = 400, + OffsetY = 200, + Height = 120, + Width = 450, + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Swimlanes/SwimlaneCreation/SwimlaneOrientation.razor b/Diagram/Server/Pages/Swimlanes/SwimlaneCreation/SwimlaneOrientation.razor new file mode 100644 index 0000000..22d1810 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/SwimlaneCreation/SwimlaneOrientation.razor @@ -0,0 +1,46 @@ +@page "/SwimlaneOrientation" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + OffsetX = 400, + OffsetY = 200, + Height = 120, + Width = 450, + Orientation = Orientation.Vertical, + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach(Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + foreach(Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Swimlanes/SwimlaneHeader/SwimlaneHeaderCustomization.razor b/Diagram/Server/Pages/Swimlanes/SwimlaneHeader/SwimlaneHeaderCustomization.razor new file mode 100644 index 0000000..22c45b3 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/SwimlaneHeader/SwimlaneHeaderCustomization.razor @@ -0,0 +1,53 @@ +@page "/SwimlaneHeaderCustomization" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART", + Style = new TextStyle() { Color = "White", FontSize = 12, Bold = true, Italic = true, TextDecoration = TextDecoration.Underline } + }, + Height = 50, + Style = new TextStyle() + { + Fill = "teal" + } + }, + OffsetX = 400, + OffsetY = 200, + Height = 150, + Width = 450, + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Swimlanes/SwimlaneHeader/SwimlaneHeaderSample.razor b/Diagram/Server/Pages/Swimlanes/SwimlaneHeader/SwimlaneHeaderSample.razor new file mode 100644 index 0000000..2d570ae --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/SwimlaneHeader/SwimlaneHeaderSample.razor @@ -0,0 +1,53 @@ +@page "/SwimlaneHeader" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + //Define diagram's swimlane collection + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + Content = "SALES PROCESS FLOW CHART", + }, + Height = 50, + }, + OffsetX = 400, + OffsetY = 200, + Height = 150, + Width = 450, + }; + // Add swimlane + SwimlaneCollections.Add(swimlane); + } + + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Swimlanes/SwimlaneHeader/SwimlaneHeaderTemplate.razor b/Diagram/Server/Pages/Swimlanes/SwimlaneHeader/SwimlaneHeaderTemplate.razor new file mode 100644 index 0000000..67056db --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/SwimlaneHeader/SwimlaneHeaderTemplate.razor @@ -0,0 +1,82 @@ +@page "/SwimlaneHeaderTemplate" + +@using Syncfusion.Blazor.Diagram + + + + + @if (context is Annotation annotation) + { + if (annotation.ID == "swimlane 1") + { + string ID = annotation.ID + "TemplateContent"; +
+ + + + + + +
SALES PROCESS FLOW CHART
+
+ } + } + + + + +@code +{ + //Define diagram's swimlane collection. + DiagramObjectCollection SwimlaneCollections = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // A swimlane is created and stored in the swimlanes collection. + Swimlane swimlane = new Swimlane() + { + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() + { + ID = "swimlane 1", + Content = "SALES PROCESS FLOW CHART", + Width = 220, + Height = 50, + UseTemplate = true + + }, + Height = 50, + Style = new TextStyle() + { + Fill = "Teal" + } + }, + OffsetX = 400, + OffsetY = 200, + Height = 120, + Width = 450, + }; + // Add swimlane. + SwimlaneCollections.Add(swimlane); + } + private void OnNodeCreating(IDiagramObject obj) + { + if (obj is Swimlane swimlane) + { + swimlane.Header.Style = new TextStyle() + { + Fill = "#5b9bd5", + StrokeColor = "#5b9bd5" + }; + foreach (Phase phase in swimlane.Phases) + { + phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + foreach (Lane lane in swimlane.Lanes) + { + lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" }; + } + } + } +} diff --git a/Diagram/Server/Pages/Swimlanes/SwimlanePalette/SwimlanePalette.razor b/Diagram/Server/Pages/Swimlanes/SwimlanePalette/SwimlanePalette.razor new file mode 100644 index 0000000..e58d0d3 --- /dev/null +++ b/Diagram/Server/Pages/Swimlanes/SwimlanePalette/SwimlanePalette.razor @@ -0,0 +1,93 @@ +@page "/SwimlanePalette" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code{ + //Reference the symbolpreview + DiagramSize SymbolPreview; + //Define symbol margin + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's swimlane-shape collection + DiagramObjectCollection SwimlaneNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + Palettes = new DiagramObjectCollection(); + + SwimlaneNodes = new DiagramObjectCollection(); + //horizontal lane + Lane horizontalLane = new Lane() + { + ID = "HorizontalSwimlane", + Orientation = Orientation.Horizontal, + Height = 100, + Width = 150, + // Style = new TextStyle() { Fill = "orange", StrokeColor = "black" }, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() { Content = "Lane Title" }, + Style = new TextStyle() { Fill = "lightblue", StrokeColor = "black" }, + Width = 25, + Height = 100 + }, + }; + + //vertical lane + Lane verticalLane = new Lane() + { + ID = "VerticalSwimlane", + Orientation = Orientation.Vertical, + Height = 150, + Width = 100, + // Style = new TextStyle() { Fill = "orange", StrokeColor = "black" }, + Header = new SwimlaneHeader() + { + Annotation = new ShapeAnnotation() { Content = "Lane Title" }, + Style = new TextStyle() { Fill = "lightblue", StrokeColor = "black" }, + Width = 100, + Height = 25 + }, + }; + + //horizontal phase + Phase horizontalPhase = new Phase() { ID = "HorizontalPhase", Orientation = Orientation.Horizontal, Width = 80, Height = 1, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } }; + + //vertical phase + Phase verticalPhase = new Phase() { ID = "VerticalPhase", Orientation = Orientation.Vertical, Width = 1, Height = 80, Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" } }; + + SwimlaneNodes = new DiagramObjectCollection() + { + horizontalLane, + verticalLane, + horizontalPhase, + verticalPhase + }; + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =SwimlaneNodes,Title="Swimlane Shapes",ID="SwimlaneShapes" }, + }; + } +} diff --git a/Diagram/Server/Pages/SymbolPalette/AddConnectorToSymbolPalette.razor b/Diagram/Server/Pages/SymbolPalette/AddConnectorToSymbolPalette.razor new file mode 100644 index 0000000..c4d0ae2 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/AddConnectorToSymbolPalette.razor @@ -0,0 +1,64 @@ +@page "/AddConnectorToSymbolPalette" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code { + + //Reference the symbolpalette + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + // Defines palette's connector collection + DiagramObjectCollection PaletteConnectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + PaletteConnectors = new DiagramObjectCollection(); + CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteConnectors,Title="Connectors" ,IsExpanded = true}, + }; + } + //Method to create palette connector + private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape) + { + Connector connector = new Connector() + { + ID = id, + Type = type, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 100, Y = 100 }, + Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#6495ED" }, + TargetDecorator = new DecoratorSettings() + { + Shape = decoratorShape, + Style = new ShapeStyle() { StrokeColor = "#6495ED", Fill = "#6495ED" } + } + }; + + PaletteConnectors.Add(connector); + } +} diff --git a/Diagram/Server/Pages/SymbolPalette/AddGroupToPalette.razor b/Diagram/Server/Pages/SymbolPalette/AddGroupToPalette.razor new file mode 100644 index 0000000..bffa0e8 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/AddGroupToPalette.razor @@ -0,0 +1,84 @@ +@page "/AddGroupToPalette" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + + +
+
+
+ + +
+
+
+ +@code { + //Define symbol margin + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + + //Reference the symbol palette + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's group collection + DiagramObjectCollection PaletteGroup = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteGroup(); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols=PaletteGroup,Title="Group Shapes",IsExpanded=true} + }; + } + //Method to create palette group. + private void CreatePaletteGroup() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + PaletteGroup.Add(node1); + PaletteGroup.Add(node2); + + NodeGroup group = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" } + }; + PaletteGroup.Add(group); + } +} + diff --git a/Diagram/Server/Pages/SymbolPalette/AddNodeToPalette.razor b/Diagram/Server/Pages/SymbolPalette/AddNodeToPalette.razor new file mode 100644 index 0000000..af58b02 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/AddNodeToPalette.razor @@ -0,0 +1,58 @@ +@page "/AddNodeToPalette" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code{ + //Reference the symbolpreview + DiagramSize SymbolPreview; + //Define symbol margin + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + Palettes = new DiagramObjectCollection(); + + PaletteNodes = new DiagramObjectCollection(); + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteNodes,Title="Flow Shapes",ID="Flow Shapes" }, + }; + } + //Method to create palette node + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } +} diff --git a/Diagram/Server/Pages/SymbolPalette/AddPaletteToSymbolPalette.razor b/Diagram/Server/Pages/SymbolPalette/AddPaletteToSymbolPalette.razor new file mode 100644 index 0000000..f9670a4 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/AddPaletteToSymbolPalette.razor @@ -0,0 +1,113 @@ +@page "/AddPaletteToSymbolPalette" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfSymbolPaletteComponent SymbolPalette; + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + // Defines palette's group collection. + DiagramObjectCollection PaletteGroup = new DiagramObjectCollection(); + // Defines palette's connector collection. + DiagramObjectCollection PaletteConnectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow); + CreatePaletteGroup(); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Flow Shapes", ID = "Flow Shapes" }, + new Palette(){Symbols = PaletteConnectors,Title = "Connectors", IsExpanded = true}, + new Palette(){Symbols = PaletteGroup,Title = "Group Shapes", IsExpanded = true} + }; + } + + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + + private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape) + { + Connector connector = new Connector() + { + ID = id, + Type = type, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575" }, + TargetDecorator = new DecoratorSettings() + { + Shape = decoratorShape, + Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" } + } + }; + PaletteConnectors.Add(connector); + } + + private void CreatePaletteGroup() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + PaletteGroup.Add(node1); + PaletteGroup.Add(node2); + NodeGroup group = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" } + }; + PaletteGroup.Add(group); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/AddRemovePaletteAtRuntime.razor b/Diagram/Server/Pages/SymbolPalette/AddRemovePaletteAtRuntime.razor new file mode 100644 index 0000000..a794ffc --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/AddRemovePaletteAtRuntime.razor @@ -0,0 +1,82 @@ +@page "/AddRemovePaletteAtRuntime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Buttons + + + + + +
+
+
+ + +
+
+
+ +@code{ + //Reference the symbolpreview + DiagramSize SymbolPreview; + //Define symbol margin + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + Palettes = new DiagramObjectCollection(); + + PaletteNodes = new DiagramObjectCollection(); + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteNodes,Title="Flow Shapes",ID="Flow Shapes" }, + }; + } + //Method to create palette node + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + private void AddPalette() + { + DiagramObjectCollection newNodes = new DiagramObjectCollection(); + Node newNode = new Node() + { + ID = "newNode", + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse } + }; + newNodes.Add(newNode as NodeBase); + DiagramObjectCollection newPalettes = new DiagramObjectCollection() + { + new Palette(){Symbols = newNodes,Title = "BasicShapes",ID = "BasicShapes" }, + }; + symbolpalette.AddPalettes(newPalettes); + } + private void RemovePalette() + { + symbolpalette.RemovePalettes("BasicShapes"); + } +} diff --git a/Diagram/Server/Pages/SymbolPalette/AddRemoveSymbolAtRuntime.razor b/Diagram/Server/Pages/SymbolPalette/AddRemoveSymbolAtRuntime.razor new file mode 100644 index 0000000..f9daeac --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/AddRemoveSymbolAtRuntime.razor @@ -0,0 +1,76 @@ +@page "/AddRemoveSymbolAtRuntime" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Buttons + + + + + +
+
+
+ + +
+
+
+ +@code{ + //Reference the symbolpreview + DiagramSize SymbolPreview; + //Define symbol margin + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + Palettes = new DiagramObjectCollection(); + + PaletteNodes = new DiagramObjectCollection(); + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteNodes,Title="FlowShapes",ID="FlowShapes" }, + }; + } + //Method to create palette node + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + private void AddSymbol() + { + Node decision = new Node() + { + ID = "Decision", + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } + }; + symbolpalette.AddPaletteItem("FlowShapes", decision, false); + } + private void RemoveSymbol() + { + symbolpalette.RemovePaletteItem("FlowShapes", "Decision"); + } +} diff --git a/Diagram/Server/Pages/SymbolPalette/AnimationSupport.razor b/Diagram/Server/Pages/SymbolPalette/AnimationSupport.razor new file mode 100644 index 0000000..c78d2be --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/AnimationSupport.razor @@ -0,0 +1,58 @@ +@page "/AnimationSupport" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfSymbolPaletteComponent SymbolPalette; + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); + CreatePaletteNode(NodeBasicShapes.Ellipse, "Ellipse"); + CreatePaletteNode(NodeBasicShapes.Star, "Star"); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Basic Shapes", ID = "Basic Shapes" }, + }; + } + + private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + { + Node node = new Node() + { + ID = id, + //SearchTags = new List() { "Basic" }, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = basicShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/CreateSymbolPalette.razor b/Diagram/Server/Pages/SymbolPalette/CreateSymbolPalette.razor new file mode 100644 index 0000000..c3b8836 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/CreateSymbolPalette.razor @@ -0,0 +1,17 @@ +@page "/CreateSymbolPalette" + +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Diagram + +@* Initializes the symbol palette *@ + + + +@code +{ + //Reference the symbol palette + SfSymbolPaletteComponent SymbolPalette; + //Initialize the palettes collection + DiagramObjectCollection palettes = new DiagramObjectCollection(); +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/DescriptionStyle.razor b/Diagram/Server/Pages/SymbolPalette/DescriptionStyle.razor new file mode 100644 index 0000000..ada6742 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/DescriptionStyle.razor @@ -0,0 +1,77 @@ +@page "/DescriptionStyle" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SfSymbolPaletteComponent SymbolPalette; + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's basic-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); + CreatePaletteNode(NodeBasicShapes.Ellipse, "Ellipse"); + CreatePaletteNode(NodeBasicShapes.Hexagon, "Hexagon"); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Basic Shapes", ID = "Basic Shapes" }, + }; + } + + private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = basicShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + SymbolInfo SymbolInfo = new SymbolInfo(); + string text = string.Empty; + text = (symbol as NodeBase).ID; + SymbolInfo.Width = 75; + SymbolInfo.Height = 40; + SymbolInfo.Description = new SymbolDescription() { + Text = text, + // Customize the style of the symbol description + Style = new TextStyle() + { + Bold = true, + Italic = true, + Color = "red", + Fill = "transparent", + FontFamily = "Arial", + FontSize = 15, + TextDecoration = TextDecoration.Underline, + TextOverflow = TextOverflow.Ellipsis, + TextWrapping = TextWrap.WrapWithOverflow + }, + Margin = new DiagramThickness(){ Top = 10, Bottom = 10 } + }; + return SymbolInfo; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/DragAndDrop.razor b/Diagram/Server/Pages/SymbolPalette/DragAndDrop.razor new file mode 100644 index 0000000..4ee96f8 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/DragAndDrop.razor @@ -0,0 +1,257 @@ +@page "/DragAndDrop" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+ + +
+
+
+
+
+ + +
+
+
+ + +
+
+
+
+ +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfDiagramComponent diagram; + SfSymbolPaletteComponent SymbolPalette; + //Define nodes collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Define connectors collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + // Defines palette's group collection. + DiagramObjectCollection PaletteGroup = new DiagramObjectCollection(); + // Defines palette's connector collection. + DiagramObjectCollection PaletteConnectors = new DiagramObjectCollection(); + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + SymbolPalette.Targets = new DiagramObjectCollection() { }; + SymbolPalette.Targets.Add(diagram); + } + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow); + CreatePaletteGroup(); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Flow Shapes", ID = "Flow Shapes" }, + new Palette(){Symbols = PaletteConnectors,Title = "Connectors", IsExpanded = true}, + new Palette(){Symbols = PaletteGroup,Title = "Group Shapes", IsExpanded = true} + }; + } + + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + + private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape) + { + Connector connector = new Connector() + { + ID = id, + Type = type, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575" }, + TargetDecorator = new DecoratorSettings() + { + Shape = decoratorShape, + Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" } + } + }; + PaletteConnectors.Add(connector); + } + + private void CreatePaletteGroup() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + PaletteGroup.Add(node1); + PaletteGroup.Add(node2); + NodeGroup group = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" } + }; + PaletteGroup.Add(group); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/EnableChunkMessage.razor b/Diagram/Server/Pages/SymbolPalette/EnableChunkMessage.razor new file mode 100644 index 0000000..54c8644 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/EnableChunkMessage.razor @@ -0,0 +1,424 @@ +@page "/EnableChunkMessage" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + + + +@code{ + + DiagramSize symbolDragPreviewSize; + public DiagramObjectCollection palettes; + double symbolHeight = 75; + double symbolWidth = 75; + + protected override void OnInitialized() + { + symbolDragPreviewSize = new DiagramSize(); + symbolDragPreviewSize.Width = 80; + symbolDragPreviewSize.Height = 80; + InitializeFloorPlannerPalettes(); + } + + private void InitializeFloorPlannerPalettes() + { + DiagramObjectCollection DoorSymbols = new DiagramObjectCollection(); + DiagramObjectCollection DiningRoomSymbols = new DiagramObjectCollection(); + DiagramObjectCollection KitchenSymbols = new DiagramObjectCollection(); + + + DoorSymbols = new DiagramObjectCollection() + { + new Node() + { + ID = "Staircase", + Width = 40, + Height = 30, + Tooltip= new DiagramTooltip() + { + Content="Staircase" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M36 1V35M36 1L25 1M36 1H48M36 35H25M36 35H48M25 35L25 1M25 35H13L13 1L25 1M48 1V35M48 1H59M48 35H59M59 1V35M59 1H71M59 35H71M71 1V35M71 1H82M71 35H82M82 1V35M82 1H94M82 35H94M94 1V35M94 1H105M94 35H105M105 1V35M105 1H117V35H105M129 1V35L1 35L1 1L129 1Z" + } + }, + new Node() + { + ID = "Staircase1", + Width = 40, + Height = 30, + Tooltip= new DiagramTooltip() + { + Content="Staircase1" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M36 1V35M36 1L25 1M36 1H48M36 35H25M36 35H48M25 35L25 1M25 35H13L13 1L25 1M48 1V35M48 1H59M48 35H59M59 1V35M59 1H71M59 35H71M71 1V35M71 1H82M71 35H82M82 1V35M82 1H94M82 35H94M94 1V35M94 1H105M94 35H105M105 1V35M105 1H117V35H105M9 17.5H122M9 17.5C9 18.8807 7.88071 20 6.5 20C5.11929 20 4 18.8807 4 17.5C4 16.1193 5.11929 15 6.5 15C7.88071 15 9 16.1193 9 17.5ZM129 1V35L1 35L1 1L129 1ZM126 17.5L121.5 20.5311V14.4689L126 17.5Z" + } + }, + new Node() + { + ID = "Staircase2", + Width = 40, + Height = 30, + Tooltip= new DiagramTooltip() + { + Content="Staircase2" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M1 17.4998L133 17.4998M121.177 0.869141L132.874 17.3083M121.582 34.7252L132.756 17.7252M121.5 0.999829V34.9998M109.5 0.999829V34.9998M97.5 0.999829V34.9998M85.5 0.999829V34.9998M73.5 0.999829V34.9998M61.5 0.999829V34.9998M49.5 0.999829V34.9998M37.5 0.999829V34.9998M25.5 0.999829L25.5 34.9998M13.5 0.999829L13.5 34.9998M133 0.999829V34.9998L1 34.9998L1 0.999824L133 0.999829Z" + } + }, + new Node() + { + ID = "TWall", + Width = 45, + Height = 30, + Tooltip= new DiagramTooltip() + { + Content="T Wall" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M106 4.00002L206 4.00004M106 4.00002L106 104M106 4.00002L0 4" + } + }, + new Node() + { + ID = "WindowGarden", + Width = 60, + Height = 10, + Tooltip= new DiagramTooltip() + { + Content="Window Garden" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M1.5 0H0V1.5V38.5H3V3H152V38.5H155V1.5V0H153.5H1.5ZM6.5 5H5V6.5V38.5H8V8H53V38.5H56V8H100V38.5H103V8H147V38.5H150V6.5V5H148.5H103H101.5H100H56H54.5H53H6.5Z" + } + }, + new Node() + { + ID = "Window1", + Width = 50, + Height = 5, + Tooltip= new DiagramTooltip() + { + Content="Window1" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M22 5.5L124 5.50001M145 9L128 9V1L145 1V9ZM1 1L18 1L18 9L1 9L1 1ZM128 8L124 8V2L128 2V8ZM18 2L22 2L22 8L18 8L18 2Z" + } + }, + new Node() + { + ID = "Window2", + Width = 50, + Height = 5, + Tooltip= new DiagramTooltip() + { + Content="Window2" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M22 3.5L124 3.50001M22 6.5L124 6.50001M145 9L128 9V1L145 1V9ZM1 1L18 1L18 9L1 9L1 1ZM128 8L124 8V2L128 2V8ZM18 2L22 2L22 8L18 8L18 2Z" + } + }, + }; + DiningRoomSymbols = new DiagramObjectCollection() + { + new Node() + { + ID = "CircleStudyTable", + Width = 27, + Height = 27, + Tooltip= new DiagramTooltip() + { + Content="DCircle Study Table" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M57 29C57 44.464 44.464 57 29 57C13.536 57 1 44.464 1 29C1 13.536 13.536 1 29 1C44.464 1 57 13.536 57 29Z" + } + }, + new Node() + { + ID = "CircleStudyTable1", + Width = 27, + Height = 27, + Tooltip= new DiagramTooltip() + { + Content="DCircle Study Table1" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M57 29C57 44.464 44.464 57 29 57C13.536 57 1 44.464 1 29C1 13.536 13.536 1 29 1C44.464 1 57 13.536 57 29Z M6.85355 12.1464C6.19532 11.4882 5.98924 10.6873 6.11305 9.86427C6.23921 9.02567 6.71264 8.15463 7.43393 7.43333L6.72683 6.72622C5.88603 7.56702 5.28822 8.62505 5.12418 9.71551C4.9578 10.8215 5.24259 11.9497 6.14645 12.8536L6.85355 12.1464ZM7.43393 7.43333C8.15523 6.71203 9.02609 6.23877 9.8645 6.11276C10.6874 5.98909 11.4882 6.19526 12.1464 6.85355L12.8536 6.14645C11.9498 5.24265 10.8218 4.95765 9.71588 5.12387C8.62553 5.28775 7.56763 5.88542 6.72683 6.72622L7.43393 7.43333ZM51.1464 46.0224C51.8108 46.6867 52.0089 47.4472 51.888 48.217C51.7639 49.0076 51.2956 49.8383 50.5673 50.5667L51.2744 51.2738C52.1081 50.44 52.7105 49.4261 52.8759 48.3721C53.0447 47.2971 52.7513 46.213 51.8536 45.3153L51.1464 46.0224ZM50.5673 50.5667C49.837 51.2969 49.0611 51.7213 48.3324 51.8114C47.6254 51.8987 46.902 51.68 46.2203 50.9982L45.5132 51.7053C46.3935 52.5857 47.4161 52.9322 48.4551 52.8038C49.4724 52.6781 50.4425 52.1056 51.2744 51.2738L50.5673 50.5667ZM46.1646 6.95984C46.8414 6.28307 47.5752 6.07026 48.2996 6.16688C49.0457 6.2664 49.837 6.70326 50.5667 7.43296L51.2738 6.72585C50.4414 5.89345 49.4592 5.3127 48.4318 5.17566C47.3826 5.03572 46.3429 5.3674 45.4575 6.25273L46.1646 6.95984ZM50.5667 7.43296C51.3108 8.17704 51.7686 8.92759 51.889 9.62476C52.0035 10.2884 51.8245 10.9684 51.1464 11.6464L51.8536 12.3536C52.7376 11.4695 53.0497 10.4703 52.8744 9.45465C52.7049 8.47256 52.0918 7.54386 51.2738 6.72585L50.5667 7.43296ZM12.1464 51.1464C11.4882 51.8047 10.6872 52.011 9.86418 51.8873C9.0256 51.7613 8.15459 51.2881 7.43333 50.5668L6.72622 51.2739C7.56706 52.1147 8.62512 52.7124 9.7156 52.8762C10.8216 53.0424 11.9497 52.7574 12.8536 51.8536L12.1464 51.1464ZM7.43333 50.5668C6.71206 49.8455 6.23878 48.9745 6.11276 48.1359C5.98908 47.3128 6.19528 46.5118 6.85355 45.8536L6.14645 45.1464C5.24262 46.0503 4.95766 47.1784 5.12387 48.2845C5.28774 49.375 5.88539 50.4331 6.72622 51.2739L7.43333 50.5668ZM56.5 29C56.5 44.1878 44.1878 56.5 29 56.5V57.5C44.7401 57.5 57.5 44.7401 57.5 29H56.5ZM29 56.5C13.8122 56.5 1.5 44.1878 1.5 29H0.5C0.5 44.7401 13.2599 57.5 29 57.5V56.5ZM1.5 29C1.5 13.8122 13.8122 1.5 29 1.5V0.5C13.2599 0.5 0.5 13.2599 0.5 29H1.5ZM29 1.5C44.1878 1.5 56.5 13.8122 56.5 29H57.5C57.5 13.2599 44.7401 0.5 29 0.5V1.5Z" + } + }, + new Node() + { + ID = "CircleStudyTable2", + Width = 27, + Height = 27, + Tooltip= new DiagramTooltip() + { + Content="Circle Study Table2" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M57 29C57 44.464 44.464 57 29 57C13.536 57 1 44.464 1 29C1 13.536 13.536 1 29 1C44.464 1 57 13.536 57 29Z M53 29C53 42.2548 42.2548 53 29 53C15.7452 53 5 42.2548 5 29C5 15.7452 15.7452 5 29 5C42.2548 5 53 15.7452 53 29Z" + } + }, + new Node() + { + ID = "CircleStudyTable3", + Width = 27, + Height = 27, + Tooltip= new DiagramTooltip() + { + Content="Circle Study Table3" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M1.00187 29.3204C0.824922 13.8575 13.2167 1.17882 28.6796 1.00187C44.1426 0.824922 56.8213 13.2167 56.9982 28.6796C57.1752 44.1426 44.7834 56.8213 29.3204 56.9982C13.8575 57.1752 1.17882 44.7834 1.00187 29.3204Z M4.00163 29.2862C3.84364 15.48 14.9077 4.15981 28.7139 4.00182C42.5201 3.84383 53.8404 14.9079 53.9984 28.7141C54.1563 42.5203 43.0923 53.8406 29.2861 53.9985C15.4798 54.1565 4.15962 43.0925 4.00163 29.2862Z M44.5585 52.7817C44.8152 53.0656 45.1557 53.2686 45.5606 53.3791C45.9655 53.4897 46.4268 53.5056 46.9183 53.426C47.4097 53.3464 47.9216 53.1729 48.4248 52.9153C48.928 52.6577 49.4125 52.3211 49.8508 51.9248C50.2891 51.5284 50.6725 51.08 50.9792 50.6051C51.2859 50.1303 51.5099 49.6383 51.6383 49.1573C51.7667 48.6763 51.797 48.2157 51.7276 47.8018C51.6581 47.3879 51.4903 47.0287 51.2336 46.7449L44.5585 52.7817Z M13.9609 52.8751C13.6983 53.1861 13.3493 53.419 12.934 53.5604C12.5186 53.7019 12.0449 53.7492 11.5399 53.6995C11.035 53.6499 10.5086 53.5043 9.99098 53.2711C9.47332 53.0379 8.97448 52.7217 8.52293 52.3405C8.07139 51.9593 7.67598 51.5205 7.35929 51.0493C7.0426 50.5781 6.81083 50.0836 6.6772 49.5942C6.54358 49.1047 6.51072 48.6298 6.58051 48.1965C6.6503 47.7633 6.82136 47.3803 7.08394 47.0692L13.9609 52.8751Z M51.1787 11.4637C51.4719 11.1448 51.6767 10.7503 51.7812 10.3026C51.8857 9.8549 51.8879 9.36283 51.7877 8.85448C51.6876 8.34613 51.4869 7.83145 51.1973 7.33983C50.9077 6.84821 50.5348 6.38928 50.0998 5.98923C49.6649 5.58919 49.1764 5.25587 48.6623 5.00831C48.1483 4.76074 47.6186 4.60378 47.1037 4.54639C46.5888 4.48899 46.0986 4.53229 45.6612 4.6738C45.2238 4.81531 44.8477 5.05227 44.5544 5.37114L51.1787 11.4637Z M6.96563 11.1862C6.7075 10.8946 6.53905 10.5288 6.46989 10.1095C6.40073 9.69022 6.43222 9.22575 6.56256 8.7426C6.6929 8.25944 6.91954 7.76707 7.22954 7.29359C7.53953 6.8201 7.92682 6.37478 8.36927 5.98305C8.81173 5.59132 9.30069 5.26085 9.80825 5.01052C10.3158 4.76018 10.832 4.59487 11.3274 4.52404C11.8228 4.4532 12.2877 4.47822 12.6955 4.59767C13.1033 4.71713 13.446 4.92867 13.7041 5.22022L6.96563 11.1862Z" + } + }, + new Node() + { + ID = "CircularTableforTwo", + Width = 27, + Height = 27, + Tooltip= new DiagramTooltip() + { + Content="Circular Table for Two" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M12.7839 6.68319C12.3695 3.67862 14.704 1 17.737 1H33.4357C36.4079 1 38.7239 3.57736 38.4072 6.53267L37.5 14.7962C33 12.2962 30.4479 12.2502 25.5 12.0049C20.8774 12.1817 18.4551 13.0876 13.9551 15.0876L12.7839 6.68319Z M32 2C32 4.20914 30.2091 6 28 6L23 6C20.7909 6 19 4.20914 19 2V1L32 1V2Z M38.6314 67.656C38.8308 70.546 36.5401 73 33.6433 73H17.5439C14.579 73 12.2654 70.4347 12.5705 67.4855L13.4604 58.6325C17.7149 60.6639 20.3595 61.8118 25.5 61.9951C30.7634 61.8969 34.0464 60.4596 38.1993 58.8266L38.6314 67.656Z M19 72C19 69.7909 20.7909 68 23 68H28C30.2091 68 32 69.7909 32 72V73H19V72Z M51 37C51 50.8071 39.8071 62 26 62C12.1929 62 1 50.8071 1 37C1 23.1929 12.1929 12 26 12C39.8071 12 51 23.1929 51 37Z M48 37C48 49.1503 38.1503 59 26 59C13.8497 59 4 49.1503 4 37C4 24.8497 13.8497 15 26 15C38.1503 15 48 24.8497 48 37Z" + } + }, + new Node() + { + ID = "RectangleDiningTable", + Width = 50, + Height = 30, + Tooltip= new DiagramTooltip() + { + Content="Rectangle Dining Table" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M26.5284 6.47992C26.2452 3.54248 28.5543 1 31.5053 1H47.4947C50.4457 1 52.7548 3.54248 52.4716 6.47992L51.65 15L27.35 15L26.5284 6.47992Z M46 2C46 4.20914 44.2091 6 42 6L37 6C34.7909 6 33 4.20914 33 2V1L46 1V2Z M52.4716 73.5201C52.7548 76.4575 50.4457 79 47.4947 79H31.5053C28.5543 79 26.2452 76.4575 26.5284 73.5201L27.35 65H51.65L52.4716 73.5201Z M33 78C33 75.7909 34.7909 74 37 74H42C44.2091 74 46 75.7909 46 78V79H33V78Z M73.5201 27.5284C76.4575 27.2452 79 29.5543 79 32.5053V48.4947C79 51.4457 76.4575 53.7548 73.5201 53.4716L65 52.65V28.35L73.5201 27.5284Z M78 47C75.7909 47 74 45.2091 74 43V38C74 35.7909 75.7909 34 78 34H79V47H78Z M6.47992 53.4716C3.54248 53.7548 1 51.4457 1 48.4947L1 32.5053C1 29.5543 3.54249 27.2452 6.47992 27.5284L15 28.35L15 52.65L6.47992 53.4716Z M61 15H19C16.7909 15 15 16.7909 15 19V61C15 63.2091 16.7909 65 19 65H61C63.2091 65 65 63.2091 65 61V19C65 16.7909 63.2091 15 61 15Z M2 34C4.20914 34 6 35.7909 6 38L6 43C6 45.2091 4.20914 47 2 47H1L1 34H2Z" + } + }, + new Node() + { + ID = "OblongDiningTable", + Width = 50, + Height = 30, + Tooltip= new DiagramTooltip() + { + Content="Oblong Dining Table" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M25.0284 6.47992C24.7452 3.54248 27.0543 1 30.0053 1H45.9947C48.9457 1 51.2548 3.54248 50.9716 6.47992L50.15 15L25.85 15L25.0284 6.47992ZM58.0284 6.47992C57.7452 3.54248 60.0543 1 63.0053 1H78.9947C81.9457 1 84.2548 3.54248 83.9716 6.47992L83.15 15L58.85 15L58.0284 6.47992Z M84.9716 73.5201C85.2548 76.4575 82.9457 79 79.9947 79H64.0053C61.0543 79 58.7452 76.4575 59.0284 73.5201L59.85 65H84.15L84.9716 73.5201Z M51.9716 73.5201C52.2548 76.4575 49.9457 79 46.9947 79H31.0053C28.0543 79 25.7452 76.4575 26.0284 73.5201L26.85 65H51.15L51.9716 73.5201Z M6.47992 53.4716C3.54249 53.7548 1 51.4457 1 48.4947L1 32.5053C1 29.5543 3.54249 27.2452 6.47992 27.5284L15 28.35V52.65L6.47992 53.4716Z M103.52 27.5284C106.458 27.2452 109 29.5543 109 32.5053V48.4947C109 51.4457 106.458 53.7548 103.52 53.4716L95 52.65V28.35L103.52 27.5284Z M91 15H19C16.7909 15 15 16.7909 15 19V61C15 63.2091 16.7909 65 19 65H91C93.2091 65 95 63.2091 95 61V19C95 16.7909 93.2091 15 91 15Z M50.15 15V15.5H50.6041L50.6477 15.048L50.15 15ZM25.85 15L25.3523 15.048L25.3959 15.5H25.85V15ZM50.9716 6.47992L50.4739 6.43192L50.9716 6.47992ZM25.0284 6.47992L24.5307 6.52791L25.0284 6.47992ZM32 1V0.5L31.5 0.5V1H32ZM45 1H45.5V0.500001L45 0.500001V1ZM36 6V5.5V6ZM32 2L32.5 2V2H32ZM41 6V6.5V6ZM45 2H45.5H45ZM83.15 15V15.5H83.6041L83.6477 15.048L83.15 15ZM58.85 15L58.3523 15.048L58.3959 15.5H58.85V15ZM83.9716 6.47992L83.4739 6.43192L83.9716 6.47992ZM58.0284 6.47992L58.5261 6.43192L58.0284 6.47992ZM65 1V0.5L64.5 0.5V1H65ZM78 1H78.5V0.500001L78 0.500001V1ZM69 6V5.5V6ZM65 2L65.5 2V2H65ZM74 6V6.5V6ZM78 2H78.5H78ZM59.85 65V64.5H59.3959L59.3523 64.952L59.85 65ZM84.15 65L84.6477 64.952L84.6041 64.5H84.15V65ZM59.0284 73.5201L59.5261 73.5681L59.0284 73.5201ZM84.9716 73.5201L84.4739 73.5681L84.9716 73.5201ZM78 79V79.5H78.5V79H78ZM65 79H64.5V79.5H65V79ZM74 74V73.5V74ZM78 78H77.5H78ZM69 74V74.5V74ZM65 78H64.5H65ZM26.85 65V64.5H26.3959L26.3523 64.952L26.85 65ZM51.15 65L51.6477 64.952L51.6041 64.5H51.15V65ZM26.0284 73.5201L26.5261 73.5681L26.0284 73.5201ZM51.9716 73.5201L51.4739 73.5681L51.9716 73.5201ZM15 28.35H15.5V27.8959L15.048 27.8523L15 28.35ZM15 52.65L15.048 53.1477L15.5 53.1041V52.65H15ZM1 32.5053H0.500002H1ZM6.47992 27.5284L6.43193 28.0261L6.47992 27.5284ZM1 48.4947H1.5H1ZM6.47992 53.4716L6.43192 52.9739L6.47992 53.4716ZM45 79V79.5H45.5V79H45ZM32 79H31.5V79.5H32V79ZM41 74V73.5V74ZM45 78H44.5H45ZM36 74V74.5V74ZM32 78H31.5H32ZM1 47H0.5L0.5 47.5H1V47ZM1 34V33.5H0.500002L0.500002 34H1ZM6 43H6.5H6ZM2 47L2 46.5H2V47ZM6 38H5.5H6ZM2 34V33.5V34ZM95 52.65H94.5V53.1041L94.952 53.1477L95 52.65ZM95 28.35L94.952 27.8523L94.5 27.8959V28.35H95ZM109 48.4947H109.5H109ZM103.52 53.4716L103.472 53.9693L103.52 53.4716ZM109 32.5053H108.5H109ZM103.52 27.5284L103.568 28.0261L103.52 27.5284ZM109 34H109.5V33.5H109V34ZM109 47V47.5H109.5V47H109ZM104 38H103.5H104ZM108 34V34.5V34ZM104 43H104.5H104ZM108 47V47.5V47ZM30.0053 1.5H45.9947V0.5H30.0053V1.5ZM50.4739 6.43192L49.6523 14.952L50.6477 15.048L51.4693 6.52791L50.4739 6.43192ZM50.15 14.5L25.85 14.5V15.5L50.15 15.5V14.5ZM26.3477 14.952L25.5261 6.43192L24.5307 6.52791L25.3523 15.048L26.3477 14.952ZM45.9947 1.5C48.6506 1.5 50.7288 3.78824 50.4739 6.43192L51.4693 6.52791C51.7808 3.29673 49.2408 0.5 45.9947 0.5V1.5ZM30.0053 0.5C26.7592 0.5 24.2192 3.29673 24.5307 6.52791L25.5261 6.43192C25.2712 3.78824 27.3494 1.5 30.0053 1.5V0.5ZM41 5.5L36 5.5V6.5L41 6.5V5.5ZM32.5 2V1H31.5V2H32.5ZM32 1.5L45 1.5V0.500001L32 0.5V1.5ZM44.5 1V2H45.5V1H44.5ZM36 5.5C34.067 5.5 32.5 3.933 32.5 2L31.5 2C31.5 4.48528 33.5147 6.5 36 6.5V5.5ZM41 6.5C43.4853 6.5 45.5 4.48528 45.5 2H44.5C44.5 3.933 42.933 5.5 41 5.5V6.5ZM63.0053 1.5H78.9947V0.5H63.0053V1.5ZM83.4739 6.43192L82.6523 14.952L83.6477 15.048L84.4693 6.52791L83.4739 6.43192ZM83.15 14.5L58.85 14.5V15.5L83.15 15.5V14.5ZM59.3477 14.952L58.5261 6.43192L57.5307 6.52791L58.3523 15.048L59.3477 14.952ZM78.9947 1.5C81.6506 1.5 83.7288 3.78824 83.4739 6.43192L84.4693 6.52791C84.7809 3.29673 82.2408 0.5 78.9947 0.5V1.5ZM63.0053 0.5C59.7592 0.5 57.2192 3.29673 57.5307 6.52791L58.5261 6.43192C58.2712 3.78824 60.3494 1.5 63.0053 1.5V0.5ZM74 5.5L69 5.5V6.5L74 6.5V5.5ZM65.5 2V1H64.5V2H65.5ZM65 1.5L78 1.5V0.500001L65 0.5V1.5ZM77.5 1V2H78.5V1H77.5ZM69 5.5C67.067 5.5 65.5 3.933 65.5 2L64.5 2C64.5 4.48528 66.5147 6.5 69 6.5V5.5ZM74 6.5C76.4853 6.5 78.5 4.48528 78.5 2H77.5C77.5 3.933 75.933 5.5 74 5.5V6.5ZM79.9947 78.5H64.0053V79.5H79.9947V78.5ZM59.5261 73.5681L60.3477 65.048L59.3523 64.952L58.5307 73.4721L59.5261 73.5681ZM59.85 65.5H84.15V64.5H59.85V65.5ZM83.6523 65.048L84.4739 73.5681L85.4693 73.4721L84.6477 64.952L83.6523 65.048ZM64.0053 78.5C61.3494 78.5 59.2712 76.2118 59.5261 73.5681L58.5307 73.4721C58.2192 76.7033 60.7592 79.5 64.0053 79.5V78.5ZM79.9947 79.5C83.2408 79.5 85.7809 76.7033 85.4693 73.4721L84.4739 73.5681C84.7288 76.2118 82.6506 78.5 79.9947 78.5V79.5ZM69 74.5H74V73.5H69V74.5ZM77.5 78V79H78.5V78H77.5ZM78 78.5H65V79.5H78V78.5ZM65.5 79V78H64.5V79H65.5ZM74 74.5C75.933 74.5 77.5 76.067 77.5 78H78.5C78.5 75.5147 76.4853 73.5 74 73.5V74.5ZM69 73.5C66.5147 73.5 64.5 75.5147 64.5 78H65.5C65.5 76.067 67.067 74.5 69 74.5V73.5ZM46.9947 78.5H31.0053V79.5H46.9947V78.5ZM26.5261 73.5681L27.3477 65.048L26.3523 64.952L25.5307 73.4721L26.5261 73.5681ZM26.85 65.5H51.15V64.5H26.85V65.5ZM50.6523 65.048L51.4739 73.5681L52.4693 73.4721L51.6477 64.952L50.6523 65.048ZM31.0053 78.5C28.3494 78.5 26.2712 76.2118 26.5261 73.5681L25.5307 73.4721C25.2192 76.7033 27.7592 79.5 31.0053 79.5V78.5ZM46.9947 79.5C50.2408 79.5 52.7808 76.7033 52.4693 73.4721L51.4739 73.5681C51.7288 76.2118 49.6506 78.5 46.9947 78.5V79.5ZM1.5 48.4947L1.5 32.5053H0.500002L0.500001 48.4947H1.5ZM6.43193 28.0261L14.952 28.8477L15.048 27.8523L6.52791 27.0307L6.43193 28.0261ZM14.5 28.35V52.65H15.5V28.35H14.5ZM14.952 52.1523L6.43192 52.9739L6.52791 53.9693L15.048 53.1477L14.952 52.1523ZM1.5 32.5053C1.5 29.8494 3.78824 27.7712 6.43193 28.0261L6.52791 27.0307C3.29674 26.7192 0.500002 29.2592 0.500002 32.5053H1.5ZM0.500001 48.4947C0.500001 51.7408 3.29673 54.2808 6.52791 53.9693L6.43192 52.9739C3.78824 53.2288 1.5 51.1506 1.5 48.4947H0.500001ZM36 74.5H41V73.5H36V74.5ZM44.5 78V79H45.5V78H44.5ZM45 78.5H32V79.5H45V78.5ZM32.5 79V78H31.5V79H32.5ZM41 74.5C42.933 74.5 44.5 76.067 44.5 78H45.5C45.5 75.5147 43.4853 73.5 41 73.5V74.5ZM36 73.5C33.5147 73.5 31.5 75.5147 31.5 78H32.5C32.5 76.067 34.067 74.5 36 74.5V73.5ZM5.5 38L5.5 43H6.5L6.5 38H5.5ZM2 46.5H1V47.5H2V46.5ZM1.5 47L1.5 34H0.500002L0.5 47H1.5ZM1 34.5H2V33.5H1V34.5ZM5.5 43C5.5 44.933 3.933 46.5 2 46.5L2 47.5C4.48528 47.5 6.5 45.4853 6.5 43H5.5ZM6.5 38C6.5 35.5147 4.48528 33.5 2 33.5L2 34.5C3.933 34.5 5.5 36.067 5.5 38H6.5ZM108.5 32.5053V48.4947H109.5V32.5053H108.5ZM103.568 52.9739L95.048 52.1523L94.952 53.1477L103.472 53.9693L103.568 52.9739ZM95.5 52.65V28.35H94.5V52.65H95.5ZM95.048 28.8477L103.568 28.0261L103.472 27.0307L94.952 27.8523L95.048 28.8477ZM108.5 48.4947C108.5 51.1506 106.212 53.2288 103.568 52.9739L103.472 53.9693C106.703 54.2808 109.5 51.7408 109.5 48.4947H108.5ZM109.5 32.5053C109.5 29.2592 106.703 26.7192 103.472 27.0307L103.568 28.0261C106.212 27.7712 108.5 29.8494 108.5 32.5053H109.5ZM104.5 43V38H103.5V43H104.5ZM108 34.5H109V33.5H108V34.5ZM108.5 34V47H109.5V34H108.5ZM109 46.5H108V47.5H109V46.5ZM104.5 38C104.5 36.067 106.067 34.5 108 34.5V33.5C105.515 33.5 103.5 35.5147 103.5 38H104.5ZM103.5 43C103.5 45.4853 105.515 47.5 108 47.5V46.5C106.067 46.5 104.5 44.933 104.5 43H103.5ZM19 15.5H91V14.5H19V15.5ZM94.5 19V61H95.5V19H94.5ZM91 64.5H19V65.5H91V64.5ZM15.5 61V19H14.5V61H15.5ZM19 64.5C17.067 64.5 15.5 62.933 15.5 61H14.5C14.5 63.4853 16.5147 65.5 19 65.5V64.5ZM94.5 61C94.5 62.933 92.933 64.5 91 64.5V65.5C93.4853 65.5 95.5 63.4853 95.5 61H94.5ZM91 15.5C92.933 15.5 94.5 17.067 94.5 19H95.5C95.5 16.5147 93.4853 14.5 91 14.5V15.5ZM19 14.5C16.5147 14.5 14.5 16.5147 14.5 19H15.5C15.5 17.067 17.067 15.5 19 15.5V14.5Z" + } + }, + new Node() + { + ID = "OvalDiningTable", + Width = 50, + Height = 30, + Tooltip= new DiagramTooltip() + { + Content="Oval Dining Table" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M22.0284 6.47992C21.7452 3.54248 24.0543 1 27.0053 1H42.9947C45.9457 1 48.2548 3.54248 47.9716 6.47992L47.5 11C47.5 11 35.2044 11.2442 32.7044 11.3676C29.5 11.5 22.85 15 22.85 15L22.0284 6.47992Z M42 2C42 4.20914 40.2091 6 38 6L33 6C30.7909 6 29 4.20914 29 2V1L42 1V2Z M55.0284 6.47992C54.7452 3.54248 57.0543 1 60.0053 1H75.9947C78.9457 1 81.2548 3.54248 80.9716 6.47992L80.2454 14.7933C76.3282 11.875 70.5 11.2431 68.6396 11.0529L55.5 11L55.0284 6.47992Z M75 2C75 4.20914 73.2091 6 71 6L66 6C63.7909 6 62 4.20914 62 2V1L75 1V2Z M81.9716 65.5201C82.2548 68.4575 79.9457 71 76.9947 71H61.0053C58.0543 71 55.7452 68.4575 56.0284 65.5201L57 61L67.5 60.9951C73.0289 60.6225 76.0202 59.7634 81.15 57L81.9716 65.5201Z M62 70C62 67.7909 63.7909 66 66 66H71C73.2091 66 75 67.7909 75 70V71H62V70Z M48.9716 65.5201C49.2548 68.4575 46.9457 71 43.9947 71H28.0053C25.0543 71 22.7452 68.4575 23.0284 65.5201L24 57.3584C24 57.3584 29 60.5 36.3178 60.9909L48.5 61L48.9716 65.5201Z M6.47992 49.4716C3.54249 49.7548 1 47.4457 1 44.4947L1 28.5053C1 25.5543 3.54249 23.2452 6.47992 23.5284L15 24C15 24 12 29.5 12.0148 36.8689C12 42 15.3446 48.5 15.3446 48.5L6.47992 49.4716Z M29 70C29 67.7909 30.7909 66 33 66H38C40.2091 66 42 67.7909 42 70V71H29V70Z M2 30C4.20914 30 6 31.7909 6 34L6 39C6 41.2091 4.20914 43 2 43H1L1 30H2Z M97.5201 23.5284C100.458 23.2452 103 25.5543 103 28.5053V44.4947C103 47.4457 100.458 49.7548 97.5201 49.4716L89 48.65C89 48.65 92 42.5 91.9951 36.5C92 30 89.1049 24.3114 89.1049 24.3114L97.5201 23.5284Z M102 43C99.7909 43 98 41.2091 98 39V34C98 31.7909 99.7909 30 102 30H103V43H102Z M67 11H37C23.1929 11 12 22.1929 12 36C12 49.8071 23.1929 61 37 61H67C80.8071 61 92 49.8071 92 36C92 22.1929 80.8071 11 67 11Z" + } + }, + new Node() + { + ID = "CircleDiningTable", + Width = 30, + Height = 30, + Tooltip= new DiagramTooltip() + { + Content="Circle Dining Table" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M36.5 12C41 12 48 14.5 48 14.5L48.8831 6.55216C49.2122 3.59033 46.8937 1 43.9137 1H28.9858C26.0418 1 23.735 3.5309 24.0072 6.46229L24.8 15C24.8 15 29.5 12 36.5 12ZM36.5 12C22.6929 12 11.5 23.1929 11.5 37C11.5 50.8071 22.6929 62 36.5 62C50.3071 62 61.5 50.8071 61.5 37C61.5 23.1929 50.3071 12 36.5 12ZM30.5 1V2C30.5 4.20914 32.2909 6 34.5 6L38.5 6C40.7091 6 42.5 4.20914 42.5 2V1L30.5 1ZM25 59.5L24.1169 67.4478C23.7878 70.4097 26.1063 73 29.0863 73H44.1301C47.0318 73 49.3242 70.5381 49.1174 67.6438L48.5 59C48.5 59 43 62 36 62C31.5 62 25 59.5 25 59.5ZM42.5 73V72C42.5 69.7909 40.7091 68 38.5 68H34.5C32.2909 68 30.5 69.7909 30.5 72V73H42.5ZM59 25.5L66.9478 24.6169C69.9097 24.2878 72.5 26.6063 72.5 29.5863V45.4357C72.5 48.4079 69.9226 50.7239 66.9673 50.4072L58.5 49.5C58.5 49.5 61.5 43.5 61.5 37.5C61.5 29 59 25.5 59 25.5ZM72.5 44H71.5C69.2909 44 67.5 42.2091 67.5 40V35C67.5 32.7909 69.2909 31 71.5 31H72.5V44ZM14 25.5L6.57312 24.6431C3.60432 24.3005 1 26.6216 1 29.6101L1 45.4137C1 48.3937 3.59033 50.7122 6.55216 50.3831L14.5 49.5C14.5 49.5 11.5 44.5 11.5 37.5C11.5 30.5 14 25.5 14 25.5ZM1 44H2C4.20914 44 6 42.2091 6 40L6 35C6 32.7909 4.20914 31 2 31H1L1 44Z" + } + }, + new Node() + { + ID = "RectangleStudyTable", + Width = 35, + Height = 22, + Tooltip= new DiagramTooltip() + { + Content="Rectangle Study Table" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M79 1H3C1.89543 1 1 1.89543 1 3V49C1 50.1046 1.89543 51 3 51H79C80.1046 51 81 50.1046 81 49V3C81 1.89543 80.1046 1 79 1Z" + } + }, + new Node() + { + ID = "RectangleStudyTable1", + Width = 35, + Height = 22, + Tooltip= new DiagramTooltip() + { + Content="Rectangle Study Table1" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M4 5C4 4.44772 4.44772 4 5 4H83C83.5523 4 84 4.44772 84 5V53C84 53.5523 83.5523 54 83 54H5C4.44772 54 4 53.5523 4 53V5Z M4 6.5C4 6.77614 3.77462 7.00425 3.50231 6.95843C3.08607 6.88841 2.68736 6.73099 2.33329 6.49441C1.83994 6.16477 1.45543 5.69623 1.22836 5.14805C1.0013 4.59987 0.94189 3.99667 1.05765 3.41473C1.1734 2.83279 1.45912 2.29824 1.87868 1.87868C2.29824 1.45912 2.83279 1.1734 3.41473 1.05765C3.99667 0.94189 4.59987 1.0013 5.14805 1.22836C5.69623 1.45543 6.16477 1.83994 6.49441 2.33329C6.73099 2.68736 6.88841 3.08607 6.95843 3.50231C7.00424 3.77462 6.77614 4 6.5 4L4.5 4C4.22386 4 4 4.22386 4 4.5L4 6.5Z M81.5 4C81.2239 4 80.9958 3.77462 81.0416 3.50231C81.1116 3.08607 81.269 2.68736 81.5056 2.33329C81.8352 1.83994 82.3038 1.45543 82.852 1.22836C83.4001 1.0013 84.0033 0.94189 84.5853 1.05765C85.1672 1.1734 85.7018 1.45912 86.1213 1.87868C86.5409 2.29824 86.8266 2.83279 86.9424 3.41473C87.0581 3.99667 86.9987 4.59987 86.7716 5.14805C86.5446 5.69623 86.1601 6.16477 85.6667 6.49441C85.3126 6.73099 84.9139 6.88841 84.4977 6.95843C84.2254 7.00424 84 6.77614 84 6.5V4.5C84 4.22386 83.7761 4 83.5 4L81.5 4Z M6.5 54C6.77614 54 7.00425 54.2254 6.95843 54.4977C6.88841 54.9139 6.73099 55.3126 6.49441 55.6667C6.16477 56.1601 5.69623 56.5446 5.14805 56.7716C4.59987 56.9987 3.99667 57.0581 3.41473 56.9424C2.83279 56.8266 2.29824 56.5409 1.87868 56.1213C1.45912 55.7018 1.1734 55.1672 1.05765 54.5853C0.94189 54.0033 1.0013 53.4001 1.22836 52.852C1.45543 52.3038 1.83994 51.8352 2.33329 51.5056C2.68736 51.269 3.08607 51.1116 3.50231 51.0416C3.77462 50.9958 4 51.2239 4 51.5V53.5C4 53.7761 4.22386 54 4.5 54H6.5Z M84 51.5C84 51.2239 84.2254 50.9958 84.4977 51.0416C84.9139 51.1116 85.3126 51.269 85.6667 51.5056C86.1601 51.8352 86.5446 52.3038 86.7716 52.852C86.9987 53.4001 87.0581 54.0033 86.9424 54.5853C86.8266 55.1672 86.5409 55.7018 86.1213 56.1213C85.7018 56.5409 85.1672 56.8266 84.5853 56.9424C84.0033 57.0581 83.4001 56.9987 82.852 56.7716C82.3038 56.5446 81.8352 56.1601 81.5056 55.6667C81.269 55.3126 81.1116 54.9139 81.0416 54.4977C80.9958 54.2254 81.2239 54 81.5 54H83.5C83.7761 54 84 53.7761 84 53.5V51.5Z" + } + }, + new Node() + { + ID = "RectangleStudyTable1", + Width = 26, + Height = 30, + Tooltip= new DiagramTooltip() + { + Content="Rectangle Study Table1" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M12.5284 6.47992C12.2452 3.54248 14.5543 1 17.5053 1H33.4947C36.4457 1 38.7548 3.54248 38.4716 6.47992L37.65 15L13.35 15L12.5284 6.47992Z M38.4716 73.5201C38.7548 76.4575 36.4457 79 33.4947 79H17.5053C14.5543 79 12.2452 76.4575 12.5284 73.5201L13.35 65H37.65L38.4716 73.5201Z M47 15H5C2.79086 15 1 16.7909 1 19V61C1 63.2091 2.79086 65 5 65H47C49.2091 65 51 63.2091 51 61V19C51 16.7909 49.2091 15 47 15Z M37.65 15V15.5H38.1041L38.1477 15.048L37.65 15ZM13.35 15L12.8523 15.048L12.8959 15.5H13.35V15ZM38.4716 6.47992L37.9739 6.43192L38.4716 6.47992ZM12.5284 6.47992L13.0261 6.43192L12.5284 6.47992ZM19 1V0.5L18.5 0.5V1H19ZM32 1H32.5V0.500001L32 0.500001V1ZM23 6V5.5V6ZM19 2L19.5 2V2H19ZM28 6V6.5V6ZM32 2H32.5H32ZM13.35 65V64.5H12.8959L12.8523 64.952L13.35 65ZM37.65 65L38.1477 64.952L38.1041 64.5H37.65V65ZM17.5053 79V79.5V79ZM12.5284 73.5201L13.0261 73.5681L12.5284 73.5201ZM33.4947 79V78.5V79ZM38.4716 73.5201L37.9739 73.5681L38.4716 73.5201ZM32 79V79.5H32.5V79H32ZM19 79H18.5V79.5H19V79ZM19 78H19.5H19ZM17.5053 1.5H33.4947V0.5H17.5053V1.5ZM37.9739 6.43192L37.1523 14.952L38.1477 15.048L38.9693 6.52791L37.9739 6.43192ZM37.65 14.5L13.35 14.5V15.5L37.65 15.5V14.5ZM13.8477 14.952L13.0261 6.43192L12.0307 6.52791L12.8523 15.048L13.8477 14.952ZM33.4947 1.5C36.1506 1.5 38.2288 3.78824 37.9739 6.43192L38.9693 6.52791C39.2808 3.29673 36.7408 0.5 33.4947 0.5V1.5ZM17.5053 0.5C14.2592 0.5 11.7192 3.29673 12.0307 6.52791L13.0261 6.43192C12.7712 3.78824 14.8494 1.5 17.5053 1.5V0.5ZM28 5.5L23 5.5V6.5L28 6.5V5.5ZM19.5 2V1H18.5V2H19.5ZM19 1.5L32 1.5V0.500001L19 0.5V1.5ZM31.5 1V2H32.5V1H31.5ZM23 5.5C21.067 5.5 19.5 3.933 19.5 2L18.5 2C18.5 4.48528 20.5147 6.5 23 6.5V5.5ZM28 6.5C30.4853 6.5 32.5 4.48528 32.5 2H31.5C31.5 3.933 29.933 5.5 28 5.5V6.5ZM33.4947 78.5H17.5053V79.5H33.4947V78.5ZM13.0261 73.5681L13.8477 65.048L12.8523 64.952L12.0307 73.4721L13.0261 73.5681ZM13.35 65.5H37.65V64.5H13.35V65.5ZM37.1523 65.048L37.9739 73.5681L38.9693 73.4721L38.1477 64.952L37.1523 65.048ZM17.5053 78.5C14.8494 78.5 12.7712 76.2118 13.0261 73.5681L12.0307 73.4721C11.7192 76.7033 14.2592 79.5 17.5053 79.5V78.5ZM33.4947 79.5C36.7408 79.5 39.2808 76.7033 38.9693 73.4721L37.9739 73.5681C38.2288 76.2118 36.1506 78.5 33.4947 78.5V79.5ZM23 74.5H28V73.5H23V74.5ZM31.5 78V79H32.5V78H31.5ZM32 78.5H19V79.5H32V78.5ZM19.5 79V78H18.5V79H19.5ZM28 74.5C29.933 74.5 31.5 76.067 31.5 78H32.5C32.5 75.5147 30.4853 73.5 28 73.5V74.5ZM23 73.5C20.5147 73.5 18.5 75.5147 18.5 78H19.5C19.5 76.067 21.067 74.5 23 74.5V73.5ZM5 15.5H47V14.5H5V15.5ZM50.5 19V61H51.5V19H50.5ZM47 64.5H5V65.5H47V64.5ZM1.5 61V19H0.5V61H1.5ZM5 64.5C3.067 64.5 1.5 62.933 1.5 61H0.5C0.5 63.4853 2.51472 65.5 5 65.5V64.5ZM50.5 61C50.5 62.933 48.933 64.5 47 64.5V65.5C49.4853 65.5 51.5 63.4853 51.5 61H50.5ZM47 15.5C48.933 15.5 50.5 17.067 50.5 19H51.5C51.5 16.5147 49.4853 14.5 47 14.5V15.5ZM5 14.5C2.51472 14.5 0.5 16.5147 0.5 19H1.5C1.5 17.067 3.067 15.5 5 15.5V14.5Z" + } + }, + }; + KitchenSymbols = new DiagramObjectCollection() + { + new Node() + { + ID = "SmallGasRange", + Width = 50, + Height = 25, + Tooltip= new DiagramTooltip() + { + Content="mall Gas Range" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M67.5828 1.96454C67.5828 1.43184 67.151 1 66.6183 1L1.96405 1.00001C1.43135 1.00001 0.999512 1.43184 0.999512 1.96454L0.999515 34.0355C0.999515 34.5682 1.43135 35 1.96405 35L66.6183 35C67.151 35 67.5828 34.5682 67.5828 34.0355V1.96454Z M33.5828 4.79852C33.5828 4.26582 33.151 3.83398 32.6183 3.83398L4.79737 3.83399C4.26467 3.83399 3.83283 4.26583 3.83283 4.79853L3.83284 31.2028C3.83284 31.7355 4.26468 32.1673 4.79738 32.1673L32.6183 32.1673C33.151 32.1673 33.5828 31.7355 33.5828 31.2028L33.5828 4.79852Z M64.7488 4.79852C64.7488 4.26582 64.317 3.83398 63.7843 3.83398L35.9634 3.83399C35.4307 3.83399 34.9988 4.26583 34.9988 4.79853L34.9989 31.2028C34.9989 31.7355 35.4307 32.1673 35.9634 32.1673L63.7843 32.1673C64.317 32.1673 64.7489 31.7355 64.7489 31.2028L64.7488 4.79852Z M26.4988 18C26.4988 22.6944 22.6933 26.5 17.9988 26.5C13.3044 26.5 9.49885 22.6944 9.49885 18C9.49885 13.3056 13.3044 9.5 17.9988 9.5C22.6933 9.5 26.4988 13.3056 26.4988 18Z M25.4363 18C25.4363 22.1076 22.1065 25.4375 17.9988 25.4375C13.8912 25.4375 10.5613 22.1076 10.5613 18C10.5613 13.8924 13.8912 10.5625 17.9988 10.5625C22.1065 10.5625 25.4363 13.8924 25.4363 18Z M25.0574 24.6826L24.6818 25.0583L22.0015 22.378L22.3772 22.0024L25.0574 24.6826Z M13.9442 13.5703L13.5685 13.946L10.888 11.2655L11.2637 10.8898L13.9442 13.5703Z M24.786 11.0938L25.1616 11.4694L22.4813 14.1497L22.1057 13.774L24.786 11.0938Z M13.7733 21.9844L14.1489 22.36L11.4686 25.0403L11.093 24.6646L13.7733 21.9844Z M21.452 18C21.452 19.9071 19.906 21.4531 17.9988 21.4531C16.0917 21.4531 14.5457 19.9071 14.5457 18C14.5457 16.0929 16.0917 14.5469 17.9988 14.5469C19.906 14.5469 21.452 16.0929 21.452 18Z M57.6658 18C57.6658 22.6944 53.8603 26.5 49.1658 26.5C44.4714 26.5 40.6658 22.6944 40.6658 18C40.6658 13.3056 44.4714 9.5 49.1658 9.5C53.8603 9.5 57.6658 13.3056 57.6658 18Z M56.6033 18C56.6033 22.1076 53.2735 25.4375 49.1658 25.4375C45.0582 25.4375 41.7283 22.1076 41.7283 18C41.7283 13.8924 45.0582 10.5625 49.1658 10.5625C53.2735 10.5625 56.6033 13.8924 56.6033 18Z M56.2235 24.6826L55.8478 25.0583L53.1675 22.378L53.5432 22.0024L56.2235 24.6826Z M45.1121 13.5703L44.7365 13.946L42.056 11.2655L42.4317 10.8898L45.1121 13.5703Z M55.952 11.0938L56.3276 11.4694L53.6474 14.1497L53.2717 13.774L55.952 11.0938Z M44.9403 21.9844L45.3159 22.36L42.6356 25.0403L42.26 24.6646L44.9403 21.9844Z M52.619 18C52.619 19.9071 51.0729 21.4531 49.1658 21.4531C47.2587 21.4531 45.7127 19.9071 45.7127 18C45.7127 16.0929 47.2587 14.5469 49.1658 14.5469C51.0729 14.5469 52.619 16.0929 52.619 18Z" + } + }, + new Node() + { + ID = "LargeGasRange", + Width = 50, + Height = 25, + Tooltip= new DiagramTooltip() + { + Content="Large Gas Range" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M101.999 1.96454C101.999 1.43184 101.567 1 101.034 1L1.96356 1.00001C1.43086 1.00001 0.999023 1.43185 0.999023 1.96455L0.999026 34.0355C0.999026 34.5682 1.43087 35 1.96357 35L101.034 35C101.567 35 101.999 34.5682 101.999 34.0355V1.96454Z M33.583 4.79803C33.583 4.26533 33.1512 3.8335 32.6185 3.8335L4.79755 3.8335C4.26485 3.8335 3.83301 4.26534 3.83301 4.79804L3.83301 31.2023C3.83301 31.735 4.26485 32.1668 4.79755 32.1668L32.6185 32.1668C33.1512 32.1668 33.583 31.735 33.583 31.2023L33.583 4.79803Z M98.749 4.96454C98.749 4.43184 98.3172 4 97.7845 4L69.9636 4C69.4309 4 68.999 4.43184 68.999 4.96454L68.999 31.3688C68.999 31.9015 69.4309 32.3333 69.9636 32.3333L97.7845 32.3333C98.3172 32.3333 98.749 31.9015 98.749 31.3688V4.96454Z M60.999 9.61601C60.999 9.2758 60.7232 9 60.383 9L42.615 9C42.2748 9 41.999 9.2758 41.999 9.61601L41.999 26.4792C41.999 26.8195 42.2748 27.0953 42.615 27.0953L60.383 27.0953C60.7232 27.0953 60.999 26.8195 60.999 26.4792V9.61601Z M26.499 18C26.499 22.6944 22.6934 26.5 17.999 26.5C13.3046 26.5 9.49902 22.6944 9.49902 18C9.49902 13.3056 13.3046 9.5 17.999 9.5C22.6934 9.5 26.499 13.3056 26.499 18Z M25.4365 18C25.4365 22.1076 22.1066 25.4375 17.999 25.4375C13.8914 25.4375 10.5615 22.1076 10.5615 18C10.5615 13.8924 13.8914 10.5625 17.999 10.5625C22.1066 10.5625 25.4365 13.8924 25.4365 18Z M25.0576 24.6826L24.682 25.0583L22.0017 22.378L22.3774 22.0024L25.0576 24.6826Z M13.9443 13.5698L13.5687 13.9455L10.8882 11.265L11.2639 10.8894L13.9443 13.5698Z M24.7861 11.0938L25.1618 11.4694L22.4815 14.1497L22.1059 13.774L24.7861 11.0938Z M13.7734 21.9844L14.1491 22.36L11.4688 25.0403L11.0932 24.6646L13.7734 21.9844Z M21.4521 18C21.4521 19.9071 19.9061 21.4531 17.999 21.4531C16.0919 21.4531 14.5459 19.9071 14.5459 18C14.5459 16.0929 16.0919 14.5469 17.999 14.5469C19.9061 14.5469 21.4521 16.0929 21.4521 18Z M91.665 18.1665C91.665 22.8609 87.8595 26.6665 83.165 26.6665C78.4706 26.6665 74.665 22.8609 74.665 18.1665C74.665 13.4721 78.4706 9.6665 83.165 9.6665C87.8595 9.6665 91.665 13.4721 91.665 18.1665Z M90.6025 18.1665C90.6025 22.2741 87.2727 25.604 83.165 25.604C79.0574 25.604 75.7275 22.2741 75.7275 18.1665C75.7275 14.0589 79.0574 10.729 83.165 10.729C87.2727 10.729 90.6025 14.0589 90.6025 18.1665Z M90.2236 24.8491L89.848 25.2248L87.1677 22.5445L87.5434 22.1689L90.2236 24.8491Z M79.1104 13.7363L78.7347 14.112L76.0542 11.4315L76.4299 11.0559L79.1104 13.7363Z M89.9521 11.2603L90.3278 11.6359L87.6475 14.3162L87.2719 13.9405L89.9521 11.2603Z M78.9404 22.1509L79.3161 22.5265L76.6358 25.2068L76.2602 24.8311L78.9404 22.1509Z M86.6182 18.1665C86.6182 20.0736 85.0721 21.6196 83.165 21.6196C81.2579 21.6196 79.7119 20.0736 79.7119 18.1665C79.7119 16.2594 81.2579 14.7134 83.165 14.7134C85.0721 14.7134 86.6182 16.2594 86.6182 18.1665Z M56.4753 18.0477C56.4753 21.0458 54.0449 23.4763 51.0467 23.4763C48.0486 23.4763 45.6182 21.0458 45.6182 18.0477C45.6182 15.0496 48.0486 12.6191 51.0467 12.6191C54.0449 12.6191 56.4753 15.0496 56.4753 18.0477Z M55.7979 18.0479C55.7979 20.6712 53.6712 22.7979 51.0479 22.7979C48.4245 22.7979 46.2979 20.6712 46.2979 18.0479C46.2979 15.4245 48.4245 13.2979 51.0479 13.2979C53.6712 13.2979 55.7979 15.4245 55.7979 18.0479Z M55.5557 22.3154L55.3158 22.5553L53.604 20.8436L53.8439 20.6037L55.5557 22.3154Z M48.458 15.2183L48.2181 15.4582L46.5062 13.7463L46.7461 13.5064L48.458 15.2183Z M55.3818 13.6367L55.6217 13.8766L53.91 15.5884L53.6701 15.3485L55.3818 13.6367Z M48.3486 20.5923L48.5885 20.8322L46.8768 22.544L46.6369 22.3041L48.3486 20.5923Z M53.2525 18.0476C53.2525 19.2656 52.2651 20.253 51.0472 20.253C49.8292 20.253 48.8418 19.2656 48.8418 18.0476C48.8418 16.8297 49.8292 15.8423 51.0472 15.8423C52.2651 15.8423 53.2525 16.8297 53.2525 18.0476Z" + } + }, + new Node() + { + ID = "LargeGasRange1", + Width = 50, + Height = 25, + Tooltip= new DiagramTooltip() + { + Content="Large Gas Range1" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M101.999 1.96454C101.999 1.43184 101.567 1 101.034 1L1.96356 1.00001C1.43086 1.00001 0.999023 1.43185 0.999023 1.96455L0.999026 34.0355C0.999026 34.5682 1.43087 35 1.96357 35L101.034 35C101.567 35 101.999 34.5682 101.999 34.0355V1.96454Z M33.583 4.79803C33.583 4.26533 33.1512 3.8335 32.6185 3.8335L4.79755 3.8335C4.26485 3.8335 3.83301 4.26534 3.83301 4.79804L3.83301 31.2023C3.83301 31.735 4.26485 32.1668 4.79755 32.1668L32.6185 32.1668C33.1512 32.1668 33.583 31.735 33.583 31.2023L33.583 4.79803Z M98.749 4.96454C98.749 4.43184 98.3172 4 97.7845 4L69.9636 4C69.4309 4 68.999 4.43184 68.999 4.96454L68.999 31.3688C68.999 31.9015 69.4309 32.3333 69.9636 32.3333L97.7845 32.3333C98.3172 32.3333 98.749 31.9015 98.749 31.3688V4.96454Z M65.749 4.96454C65.749 4.43184 65.3172 4 64.7845 4L36.9636 4C36.4309 4 35.999 4.43184 35.999 4.96454L35.999 31.3688C35.999 31.9015 36.4309 32.3333 36.9636 32.3333L64.7845 32.3333C65.3172 32.3333 65.749 31.9015 65.749 31.3688V4.96454Z M26.499 18C26.499 22.6944 22.6934 26.5 17.999 26.5C13.3046 26.5 9.49902 22.6944 9.49902 18C9.49902 13.3056 13.3046 9.5 17.999 9.5C22.6934 9.5 26.499 13.3056 26.499 18Z M25.4365 18C25.4365 22.1076 22.1066 25.4375 17.999 25.4375C13.8914 25.4375 10.5615 22.1076 10.5615 18C10.5615 13.8924 13.8914 10.5625 17.999 10.5625C22.1066 10.5625 25.4365 13.8924 25.4365 18Z M25.0576 24.6826L24.682 25.0583L22.0017 22.378L22.3774 22.0024L25.0576 24.6826Z M13.9443 13.5698L13.5687 13.9455L10.8882 11.265L11.2639 10.8894L13.9443 13.5698Z M24.7861 11.0938L25.1618 11.4694L22.4815 14.1497L22.1059 13.774L24.7861 11.0938Z M13.7734 21.9844L14.1491 22.36L11.4688 25.0403L11.0932 24.6646L13.7734 21.9844Z M21.4521 18C21.4521 19.9071 19.9061 21.4531 17.999 21.4531C16.0919 21.4531 14.5459 19.9071 14.5459 18C14.5459 16.0929 16.0919 14.5469 17.999 14.5469C19.9061 14.5469 21.4521 16.0929 21.4521 18Z M91.665 18.1665C91.665 22.8609 87.8595 26.6665 83.165 26.6665C78.4706 26.6665 74.665 22.8609 74.665 18.1665C74.665 13.4721 78.4706 9.6665 83.165 9.6665C87.8595 9.6665 91.665 13.4721 91.665 18.1665Z M90.6025 18.1665C90.6025 22.2741 87.2727 25.604 83.165 25.604C79.0574 25.604 75.7275 22.2741 75.7275 18.1665C75.7275 14.0589 79.0574 10.729 83.165 10.729C87.2727 10.729 90.6025 14.0589 90.6025 18.1665Z M90.2236 24.8491L89.848 25.2248L87.1677 22.5445L87.5434 22.1689L90.2236 24.8491Z M79.1104 13.7363L78.7347 14.112L76.0542 11.4315L76.4299 11.0559L79.1104 13.7363Z M89.9521 11.2603L90.3278 11.6359L87.6475 14.3162L87.2719 13.9405L89.9521 11.2603Z M78.9404 22.1509L79.3161 22.5265L76.6358 25.2068L76.2602 24.8311L78.9404 22.1509Z M86.6182 18.1665C86.6182 20.0736 85.0721 21.6196 83.165 21.6196C81.2579 21.6196 79.7119 20.0736 79.7119 18.1665C79.7119 16.2594 81.2579 14.7134 83.165 14.7134C85.0721 14.7134 86.6182 16.2594 86.6182 18.1665Z M58.665 18.1665C58.665 22.8609 54.8595 26.6665 50.165 26.6665C45.4706 26.6665 41.665 22.8609 41.665 18.1665C41.665 13.4721 45.4706 9.6665 50.165 9.6665C54.8595 9.6665 58.665 13.4721 58.665 18.1665Z M57.6025 18.1665C57.6025 22.2741 54.2727 25.604 50.165 25.604C46.0574 25.604 42.7275 22.2741 42.7275 18.1665C42.7275 14.0589 46.0574 10.729 50.165 10.729C54.2727 10.729 57.6025 14.0589 57.6025 18.1665Z M57.2236 24.8491L56.848 25.2248L54.1677 22.5445L54.5434 22.1689L57.2236 24.8491Z M46.1104 13.7363L45.7347 14.112L43.0542 11.4315L43.4299 11.0559L46.1104 13.7363Z M56.9521 11.2603L57.3278 11.6359L54.6475 14.3162L54.2719 13.9405L56.9521 11.2603Z M45.9404 22.1509L46.3161 22.5265L43.6358 25.2068L43.2602 24.8311L45.9404 22.1509Z M53.6182 18.1665C53.6182 20.0736 52.0721 21.6196 50.165 21.6196C48.2579 21.6196 46.7119 20.0736 46.7119 18.1665C46.7119 16.2594 48.2579 14.7134 50.165 14.7134C52.0721 14.7134 53.6182 16.2594 53.6182 18.1665Z" + } + }, + new Node() + { + ID = "Refrigerator", + Width = 25, + Height = 25, + Tooltip= new DiagramTooltip() + { + Content="Refrigerator" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M1 8.58323H61V58.0356H1V8.58323Z M1 58.8332H61V63.6189C61 65.381 59.5716 66.8094 57.8095 66.8094H4.19048C2.42843 66.8094 1 65.381 1 63.6189V58.8332Z M57.0527 8.17857L4.158 8.17857L4.158 4.19047C4.158 2.42842 5.58642 1 7.34847 1L53.8623 1C55.6243 1 57.0527 2.42843 57.0527 4.19048V8.17857Z M1 8.58323V8.08323H0.5V8.58323H1ZM61 8.58323H61.5V8.08323H61V8.58323ZM61 58.0356V58.5356H61.5V58.0356H61ZM1 58.0356H0.5V58.5356H1V58.0356ZM1 58.8332V58.3332H0.5V58.8332H1ZM61 58.8332H61.5V58.3332H61V58.8332ZM6.52686 66.8094V66.3094H6.02686V66.8094H6.52686ZM16.79 66.8094H17.29V66.3094H16.79V66.8094ZM57.0527 8.17857V8.67857H57.5527V8.17857H57.0527ZM4.158 8.17857H3.658V8.67857H4.158V8.17857ZM53.8623 1V0.500004V1ZM57.0527 4.19048H56.5527H57.0527ZM4.158 4.19047H3.658H4.158ZM7.34847 1V1.5V1ZM1 9.08323H61V8.08323H1V9.08323ZM60.5 8.58323V58.0356H61.5V8.58323H60.5ZM61 57.5356H1V58.5356H61V57.5356ZM1.5 58.0356V8.58323H0.5V58.0356H1.5ZM1 59.3332H61V58.3332H1V59.3332ZM60.5 58.8332V63.6189H61.5V58.8332H60.5ZM57.8095 66.3094H4.19048V67.3094H57.8095V66.3094ZM1.5 63.6189V58.8332H0.5V63.6189H1.5ZM4.19048 66.3094C2.70457 66.3094 1.5 65.1049 1.5 63.6189H0.5C0.5 65.6571 2.15228 67.3094 4.19048 67.3094V66.3094ZM60.5 63.6189C60.5 65.1049 59.2954 66.3094 57.8095 66.3094V67.3094C59.8477 67.3094 61.5 65.6571 61.5 63.6189H60.5ZM6.52686 67.3094H16.79V66.3094H6.52686V67.3094ZM13.5995 69.4999H9.71733V70.4999H13.5995V69.4999ZM9.71733 69.4999C8.23142 69.4999 7.02686 68.2953 7.02686 66.8094H6.02686C6.02686 68.8476 7.67914 70.4999 9.71733 70.4999V69.4999ZM16.29 66.8094C16.29 68.2953 15.0854 69.4999 13.5995 69.4999V70.4999C15.6377 70.4999 17.29 68.8476 17.29 66.8094H16.29ZM57.0527 7.67857L4.158 7.67857V8.67857L57.0527 8.67857V7.67857ZM4.658 8.17857L4.658 4.19047H3.658L3.658 8.17857H4.658ZM7.34847 1.5L53.8623 1.5V0.500004L7.34847 0.5V1.5ZM56.5527 4.19048V8.17857H57.5527V4.19048H56.5527ZM53.8623 1.5C55.3482 1.5 56.5527 2.70457 56.5527 4.19048H57.5527C57.5527 2.15229 55.9005 0.500004 53.8623 0.500004V1.5ZM4.658 4.19047C4.658 2.70456 5.86256 1.5 7.34847 1.5V0.5C5.31028 0.5 3.658 2.15228 3.658 4.19047H4.658Z" + } + }, + new Node() + { + ID = "WaterCooler", + Width = 25, + Height = 25, + Tooltip= new DiagramTooltip() + { + Content="Water Cooler" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M49 1H3C1.89543 1 1 1.89543 1 3V49C1 50.1046 1.89543 51 3 51H49C50.1046 51 51 50.1046 51 49V3C51 1.89543 50.1046 1 49 1Z M47 26C47 37.598 37.598 47 26 47C14.402 47 5 37.598 5 26C5 14.402 14.402 5 26 5C37.598 5 47 14.402 47 26Z M30 26C30 28.2091 28.2091 30 26 30C23.7909 30 22 28.2091 22 26C22 23.7909 23.7909 22 26 22C28.2091 22 30 23.7909 30 26Z M49 1H3C1.89543 1 1 1.89543 1 3V49C1 50.1046 1.89543 51 3 51H49C50.1046 51 51 50.1046 51 49V3C51 1.89543 50.1046 1 49 1Z M47 26C47 37.598 37.598 47 26 47C14.402 47 5 37.598 5 26C5 14.402 14.402 5 26 5C37.598 5 47 14.402 47 26Z M30 26C30 28.2091 28.2091 30 26 30C23.7909 30 22 28.2091 22 26C22 23.7909 23.7909 22 26 22C28.2091 22 30 23.7909 30 26Z" + } + }, + new Node() + { + ID = "DoubleSink", + Width = 50, + Height = 22, + Tooltip= new DiagramTooltip() + { + Content="Double Sink" + }, + Constraints = (NodeConstraints.Default | NodeConstraints.Tooltip), + Shape = new PathShape() + { + Data = "M1 9C1 4.58172 4.58172 1 9 1H115C119.418 1 123 4.58172 123 9V41C123 45.4183 119.418 49 115 49H9C4.58172 49 1 45.4183 1 41V9Z M7 13C7 10.7909 8.79086 9 11 9H55C57.2091 9 59 10.7909 59 13V37C59 39.2091 57.2091 41 55 41H11C8.79086 41 7 39.2091 7 37V13Z M65 13C65 10.7909 66.7909 9 69 9H113C115.209 9 117 10.7909 117 13V37C117 39.2091 115.209 41 113 41H69C66.7909 41 65 39.2091 65 37V13Z M35 25.5C35 26.8807 33.8807 28 32.5 28C31.1193 28 30 26.8807 30 25.5C30 24.1193 31.1193 23 32.5 23C33.8807 23 35 24.1193 35 25.5Z M93 25.5C93 26.8807 91.8807 28 90.5 28C89.1193 28 88 26.8807 88 25.5C88 24.1193 89.1193 23 90.5 23C91.8807 23 93 24.1193 93 25.5Z M64.3638 10.4863C64.3638 10.4863 65.071 10.4863 65.7781 9.77915C66.4852 9.07204 66.4852 8.36493 66.4852 8.36493L74.4865 15.2232C75.5104 16.1009 75.5705 17.6644 74.6169 18.618C73.6633 19.5716 72.0998 19.5115 71.2221 18.4876L64.3638 10.4863Z M65.4246 4.47532C66.7915 5.84216 66.7915 8.05823 65.4246 9.42507C64.0578 10.7919 61.8417 10.7919 60.4749 9.42507C59.108 8.05823 59.108 5.84216 60.4749 4.47532C61.8417 3.10849 64.0578 3.10849 65.4246 4.47532Z" + } + }, + }; + + Palette Door = new Palette() { Symbols = DoorSymbols, Title = "Doors and Walls", ID = "Door", IconCss = "e-ddb-icons e-flow" }; + Palette DiningRoom = new Palette() { Symbols = DiningRoomSymbols, Title = "Dining Room", ID = "DiningRoom", IconCss = "e-ddb-icons e-flow" }; + Palette Kitchen = new Palette() { Symbols = KitchenSymbols, Title = "Kitchen", ID = "Kitchen", IconCss = "e-ddb-icons e-flow" }; + + palettes = new DiagramObjectCollection(); + palettes.Add(Door); + palettes.Add(DiningRoom); + palettes.Add(Kitchen); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/GroupSample.razor b/Diagram/Server/Pages/SymbolPalette/GroupSample.razor new file mode 100644 index 0000000..93be9fc --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/GroupSample.razor @@ -0,0 +1,270 @@ +@page "/GroupSample" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+ + +
+
+
+
+
+ + +
+
+
+ + +
+
+
+
+ +@code +{ + //Define symbol margin + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + //Reference the diagram + SfDiagramComponent diagram; + //Reference the symbolpalette + SfSymbolPaletteComponent symbolpalette; + + //Define nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + //Define connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + // Defines palette's group collection + DiagramObjectCollection PaletteGroup = new DiagramObjectCollection(); + + // Defines palette's connector collection + DiagramObjectCollection PaletteConnectors = new DiagramObjectCollection(); + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + symbolpalette.Targets = new DiagramObjectCollection() { }; + symbolpalette.Targets.Add(diagram); + } + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow); + CreatePaletteGroup(); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteNodes,Title="Flow Shapes",ID="Flow Shapes" }, + new Palette(){Symbols =PaletteConnectors,Title="Connectors" ,IsExpanded = true}, + new Palette(){Symbols=PaletteGroup,Title="Group Shapes",IsExpanded=true} + }; + } + //Method to create palette node + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + //Method to create palette connector + private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape) + { + Connector connector = new Connector() + { + ID = id, + Type = type, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575" }, + TargetDecorator = new DecoratorSettings() + { + Shape = decoratorShape, + Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" } + } + }; + + PaletteConnectors.Add(connector); + } + //Method to create palette group + private void CreatePaletteGroup() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + PaletteGroup.Add(node1); + PaletteGroup.Add(node2); + + NodeGroup group = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" } + }; + PaletteGroup.Add(group); + } +} + diff --git a/Diagram/Server/Pages/SymbolPalette/PaletteExpandMode.razor b/Diagram/Server/Pages/SymbolPalette/PaletteExpandMode.razor new file mode 100644 index 0000000..6c84ff0 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/PaletteExpandMode.razor @@ -0,0 +1,296 @@ +@page "/PaletteExpandMode" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.DropDowns + + + + +@code { + //Reference the symbolpalette + SfSymbolPaletteComponent Palette; + //Define the symbolmargin + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + private int? index { get; set; } = 1; + //Define pallette collection + public DiagramObjectCollection Palettes; + + SfDropDownList Expandable; + + public int? sizeChangeValue { get; set; } = 80; + bool animationChecked = true; + bool AnimationMode = true; + + bool icon = true; + + double SymbolHeight = 50; + + double SymbolWidth = 50; + + public string Height { get; set; } = "580px"; + + public double length = 70; + + public DiagramObjectCollection ConnectorCollection + { + get; + set; + } + + + public SymbolInfo SymbolInfo { get; set; } + public DiagramObjectCollection BasicShape { get; set; } + public DiagramObjectCollection Connectors { get; set; } + public DiagramObjectCollection FlowShapess { get; set; } + + public class Modevalue + { + public string Text { get; set; } + public string Value { get; set; } + + } + + private List ExpandMode = new List() { + new Modevalue { Text ="Single", Value= "Single" }, + new Modevalue { Text = "Multiple", Value = "Multiple" }, + }; + + Syncfusion.Blazor.Navigations.ExpandMode ExpandModeType = Syncfusion.Blazor.Navigations.ExpandMode.Multiple; + + public void ModeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs args) + { + + if (args.Value == "Multiple") + { + Palette.Palettes[0].IsExpanded = true; + Palette.Palettes[1].IsExpanded = true; + Palette.Palettes[2].IsExpanded = true; + } + else + { + Palette.Palettes[0].IsExpanded = true; + Palette.Palettes[1].IsExpanded = false; + Palette.Palettes[2].IsExpanded = false; + + } + this.StateHasChanged(); + } + + private void sizeChange(Syncfusion.Blazor.Inputs.ChangeEventArgs args) + { + this.SymbolWidth = double.Parse(args.Value.ToString()); + this.SymbolHeight = double.Parse(args.Value.ToString()); + this.sizeChangeValue = int.Parse(args.Value.ToString()); + this.StateHasChanged(); + } + + + private void animationChange(Syncfusion.Blazor.Buttons.ChangeEventArgs args) + { + this.animationChecked = args.Checked; + this.AnimationMode = args.Checked; + this.StateHasChanged(); + } + + private void iconChange(Syncfusion.Blazor.Buttons.ChangeEventArgs args) + { + for (var i = 0; i < Palettes.Count; i++) + { + this.icon = args.Checked; + if (args.Checked) + { + if (i == 0) + { + Palettes[i].IconCss = "e-ddb-icons e-basic"; + } + else if (i == 1) + { + Palettes[i].IconCss = "e-ddb-icons e-flow"; + } + else if (i == 2) + { + Palettes[i].IconCss = "e-ddb-icons e-connector"; + } + } + else + { + Palettes[i].IconCss = ""; + } + this.StateHasChanged(); + } + } + + protected override void OnInitialized() + { + InitializePalatte(); + } + + private void InitializePalatte() + { + Palettes = new DiagramObjectCollection(); + + SymbolInfo = new SymbolInfo() + { + Fit = true + }; + + BasicShape = new DiagramObjectCollection +{ + new Node() + { + ID="Rectangle" , Shape = new BasicShape(){ + Type = NodeShapes.Basic, Shape=NodeBasicShapes.Rectangle}, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575"} + }, + new Node() + { + ID="Ellipse" , Shape = new BasicShape(){ + Type =NodeShapes.Basic,Shape=NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575"} + }, + new Node() + { + ID="Parallelogram" , Shape = new BasicShape(){ + Type =NodeShapes.Basic,Shape=NodeBasicShapes.Parallelogram }, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575"} + }, + new Node() + { + ID="Triangle" , Shape = new BasicShape(){ + Type =NodeShapes.Basic,Shape=NodeBasicShapes.Triangle}, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575"} + }, + new Node() + { + ID="Hexagon" , Shape = new BasicShape(){ + Type =NodeShapes.Basic,Shape=NodeBasicShapes.Hexagon}, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575"} + }, + new Node() + { + ID="Pentagon" , Shape = new BasicShape(){ + Type =NodeShapes.Basic,Shape=NodeBasicShapes.Pentagon }, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575"} + }, + new Node() + { + ID="Cylinder" , Shape = new BasicShape(){ + Type =NodeShapes.Basic,Shape=NodeBasicShapes.Cylinder}, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575"} + }, + new Node() + { + ID="Star" , Shape = new BasicShape(){ + Type =NodeShapes.Basic, Shape=NodeBasicShapes.Star}, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575"} + }, + }; + + Connectors = new DiagramObjectCollection() +{ + new Connector(){ID="Link1" , Type = ConnectorSegmentType.Orthogonal ,SourcePoint= new DiagramPoint(){ X=0,Y=0 },TargetPoint = new DiagramPoint(){ X=40,Y=40}, + TargetDecorator= new DecoratorSettings() + { Shape=DecoratorShape.Arrow, Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" }},Style= new ShapeStyle(){ StrokeWidth=2, StrokeColor = "#757575"} + }, + new Connector(){ID="link3" , Type=ConnectorSegmentType.Orthogonal,SourcePoint= new DiagramPoint(){ X=0,Y=0 },TargetPoint = new DiagramPoint(){ X=40,Y=40}, + TargetDecorator= new DecoratorSettings(){ Shape=DecoratorShape.None},Style= new ShapeStyle(){ StrokeWidth=2, StrokeColor = "#757575"} + }, + new Connector(){ID="Link21" , Type=ConnectorSegmentType.Straight,SourcePoint= new DiagramPoint(){ X=0,Y=0 },TargetPoint = new DiagramPoint(){ X=40,Y=40}, + TargetDecorator= new DecoratorSettings() + { Shape=DecoratorShape.Arrow, Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" }},Style= new ShapeStyle(){ StrokeWidth=2, StrokeColor = "#757575"} + }, + new Connector(){ID="link23" , Type=ConnectorSegmentType.Straight,SourcePoint= new DiagramPoint(){ X=0,Y=0 },TargetPoint = new DiagramPoint(){ X=40,Y=40}, + TargetDecorator= new DecoratorSettings(){ Shape=DecoratorShape.None},Style= new ShapeStyle(){ StrokeWidth=2, StrokeColor = "#757575"} + }, + new Connector(){ID="link33" , Type=ConnectorSegmentType.Bezier,SourcePoint= new DiagramPoint(){ X=0,Y=0 },TargetPoint = new DiagramPoint(){ X=40,Y=40}, + TargetDecorator= new DecoratorSettings(){ Shape=DecoratorShape.None},Style= new ShapeStyle(){ StrokeWidth=2, StrokeColor = "#757575"} + } + }; + + FlowShapess = new DiagramObjectCollection() +{ + new Node() + { + ID = "Terminator", + Style = new ShapeStyle(){StrokeWidth = 2, StrokeColor = "#757575" }, + Shape = new FlowShape() { Type = NodeShapes.Flow,Shape=NodeFlowShapes.Terminator } + }, + new Node() + { + ID = "Process", + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" }, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Process } + }, + new Node() + { + ID = "Sort", + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" }, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Sort } + }, + new Node() + { + ID = "Document", + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" }, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Document } + }, + new Node() + { + ID = "Predefined Process", + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" }, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.PreDefinedProcess } + }, + new Node() + { + ID = "Punched Tape", + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" }, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.PaperTap } + }, + new Node() + { + ID = "Direct Data", + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" }, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.DirectData + } + }, + new Node() + { + ID = "Sequential Data", + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" }, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.SequentialData } + } + }; + + Palettes.Add( + new Palette() + { + ID = "Flowshapess", + IsExpanded = true, + Symbols = FlowShapess, + Title = "Flowshapes", + IconCss = "e-ddb-icons e-flow" + } + ); + Palettes.Add( + new Palette() + { + ID = "BasicShape", + IsExpanded = true, + Symbols = BasicShape, + Title = "Basic Shapes", + IconCss = "e-ddb-icons e-basic" + } + ); + + Palettes.Add( + new Palette() + { + ID = "Connectors", + IsExpanded = true, + Symbols = Connectors, + Title = "Connectors", + IconCss = "e-ddb-icons e-connector" + } + ); + } +} diff --git a/Diagram/Server/Pages/SymbolPalette/PaletteHeader.razor b/Diagram/Server/Pages/SymbolPalette/PaletteHeader.razor new file mode 100644 index 0000000..8129b96 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/PaletteHeader.razor @@ -0,0 +1,93 @@ +@page "/PaletteHeader" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Buttons + +
+
+ + + + + +
+
+
+ + +
+
+
+ +@code { + //Define symbolpreview + DiagramSize SymbolPreview; + //Define symbol margin + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + //Reference the symbol palette + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + Node node = new Node() + { + ID = "Rectangle", + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteNodes,Title="Basic Shapes",ID="Basic Shapes" }, + }; + } + //Method to update heading + private void UpdateHeading() + { + Node Star = new Node() + { + ID = "Star", + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Star } + }; + symbolpalette.AddPaletteItem("Basic Shapes", Star, false); + } + //Method to update heading + private void UpdateHeading1() + { + symbolpalette.RemovePaletteItem("Basic Shapes", "Star"); + } + //Method to update heading + private void UpdateHeading2() + { + DiagramObjectCollection newNodes = new DiagramObjectCollection(); + + Node newNode = new Node() { ID = "newNode", Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Process } }; + newNodes.Add(newNode as NodeBase); + + DiagramObjectCollection newPalettes = new DiagramObjectCollection() + { + new Palette(){Symbols =newNodes,Title="FlowShapes",ID="FlowShapes" }, + }; + symbolpalette.AddPalettes(newPalettes); + } + private void UpdateHeading3() + { + symbolpalette.RemovePalettes("FlowShapes"); + } + +} + diff --git a/Diagram/Server/Pages/SymbolPalette/RefereshPalette.razor b/Diagram/Server/Pages/SymbolPalette/RefereshPalette.razor new file mode 100644 index 0000000..eb1a7b0 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/RefereshPalette.razor @@ -0,0 +1,70 @@ +@page "/RefereshPalette" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Buttons + +
+
+
+ + +
+
+
+ + +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfSymbolPaletteComponent SymbolPalette; + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Basic Shapes", ID = "Basic Shapes" }, + }; + } + + private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = basicShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + SymbolInfo SymbolInfo = new SymbolInfo(); + string text = null; + text = (symbol as Node).ID; + SymbolInfo.Description = new SymbolDescription() { Text = text }; + return SymbolInfo; + } + private void RefreshSymbols() + { + SymbolPalette.RefreshSymbols(); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/SearchOption.razor b/Diagram/Server/Pages/SymbolPalette/SearchOption.razor new file mode 100644 index 0000000..8c45856 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/SearchOption.razor @@ -0,0 +1,458 @@ +@page "/SearchOption" + + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@*Hidden:Lines*@ +@using Syncfusion.Blazor.Buttons +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.DropDowns +@*End:Hidden*@ +@using shapes = Syncfusion.Blazor.Diagram.NodeShapes +@using SymbolExpandMode = Syncfusion.Blazor.Navigations.ExpandMode +@using ButtonChangeArgs = Syncfusion.Blazor.Buttons.ChangeEventArgs +@*Hidden:Lines*@ +@inject NavigationManager NavigationManager + + +@*End:Hidden*@ + + +
+ @*Hidden:Lines*@ +
+ +
+ @*Hidden:Lines*@ + @*End:Hidden*@ + @*End:Hidden*@ +
+ + +
+
+ + + + + + + + +
+ @*Hidden:Lines*@ +
+
+ @*End:Hidden*@ +
+ +@code{ + @*Hidden:Lines*@ + + private int? index { get; set; } = 1; + public int? sizeChangeValue { get; set; } = 75; + bool icon = true; + bool text = true; + bool animation = true; + bool animationCheckbox = true; + @*End:Hidden*@ + DiagramSize symbolDragPreviewSize; + SymbolExpandMode paletteExpandMode = SymbolExpandMode.Multiple; + SymbolInfo SymbolInfo = new SymbolInfo(); + public SfDiagramComponent Diagram; + SfSymbolPaletteComponent palette; + public DiagramObjectCollection palettes; + double symbolHeight = 75; + double symbolWidth = 75; + public DiagramObjectCollection basicShapes { get; set; } + public DiagramObjectCollection connectors { get; set; } + public DiagramObjectCollection flowShapes { get; set; } + // Defines interval values for GridLines + public double[] GridLineIntervals { get; set; } + //Defines Diagram's Nodes collection + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + + //Defines Diagram's Connectors collection + private DiagramObjectCollection diagramConnectors = new DiagramObjectCollection(); + [Inject] + protected IJSRuntime jsRuntime { get; set; } + @*Hidden:Lines*@ + @*End:Hidden*@ + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + palette.Targets = new DiagramObjectCollection + { + Diagram + }; + } + + protected override void OnInitialized() + { + + symbolDragPreviewSize = new DiagramSize(); + symbolDragPreviewSize.Width = 80; + symbolDragPreviewSize.Height = 80; + GridLineIntervals = new double[] { 1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75 }; + InitializePalatte(); + } + + private void InitializePalatte() + { + palettes = new DiagramObjectCollection(); + + // palette which contains basic shape nodes + basicShapes = new DiagramObjectCollection + { + CreateBasicNode("Rectangle",NodeBasicShapes.Rectangle), + CreateBasicNode("Ellipse",NodeBasicShapes.Ellipse), + CreateBasicNode("Diamond",NodeBasicShapes.Diamond), + CreateBasicNode("Triangle",NodeBasicShapes.Triangle), + CreateBasicNode("Hexagon",NodeBasicShapes.Hexagon), + CreateBasicNode("Pentagon",NodeBasicShapes.Pentagon), + CreateBasicNode("Cylinder",NodeBasicShapes.Cylinder), + CreateBasicNode("Star",NodeBasicShapes.Star), + CreateBasicNode("Octagon",NodeBasicShapes.Octagon), + CreateBasicNode("Plus",NodeBasicShapes.Plus), + CreateBasicNode("Heptagon",NodeBasicShapes.Heptagon), + }; + + // palette which contains connectors + connectors = new DiagramObjectCollection() + { + CreateConnector("link1",ConnectorSegmentType.Orthogonal,DecoratorShape.Arrow), + CreateConnector("link2",ConnectorSegmentType.Orthogonal,DecoratorShape.None), + CreateConnector("link3",ConnectorSegmentType.Straight,DecoratorShape.Arrow), + CreateConnector("link4",ConnectorSegmentType.Straight,DecoratorShape.None), + CreateConnector("link5",ConnectorSegmentType.Bezier,DecoratorShape.None), + CreateConnector("link6",ConnectorSegmentType.Bezier, DecoratorShape.Arrow) + + }; + + // palette which contains flow shape nodes + flowShapes = new DiagramObjectCollection() + { + CreateFlowNode("Terminator",NodeFlowShapes.Terminator), + CreateFlowNode("Process",NodeFlowShapes.Process), + CreateFlowNode("Sort",NodeFlowShapes.Sort), + CreateFlowNode("Document",NodeFlowShapes.Document), + CreateFlowNode("Display",NodeFlowShapes.Display), + CreateFlowNode("PaperTap",NodeFlowShapes.PaperTap), + CreateFlowNode("Delay",NodeFlowShapes.Delay), + CreateFlowNode("Data",NodeFlowShapes.Data), + CreateFlowNode("Card",NodeFlowShapes.Card), + CreateFlowNode("Collate",NodeFlowShapes.Collate), + CreateFlowNode("Decision",NodeFlowShapes.Decision), + }; + + #pragma warning disable BL0005 + palettes.Add( + new Palette() + { + ID = "BasicShape", + IsExpanded = true, + Symbols = basicShapes, + Title = "Basic Shapes", + IconCss = "e-ddb-icons e-basic" + } + ); + palettes.Add( + new Palette() + { + ID = "FlowShape", + IsExpanded = true, + Symbols = flowShapes, + Title = "Flow Shapes", + IconCss = "e-ddb-icons e-flow" + } + ); + palettes.Add( + new Palette() + { + ID = "Connectors", + IsExpanded = true, + Symbols = connectors, + Title = "Connectors", + IconCss = "e-ddb-icons e-connector" + } + ); + #pragma warning restore BL0005 + } + + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + string description = symbol is Node ? (symbol as Node).ID : (symbol as Connector).ID; + if (text) + { + SymbolInfo.Description = new SymbolDescription() + { + Text = description, + Style = new TextStyle() + { + TextOverflow = TextOverflow.Wrap + }, + }; + } + else + { + SymbolInfo.Description = new SymbolDescription() + { + Text = "", + Style = new TextStyle() + { + TextOverflow = TextOverflow.Wrap + }, + }; + } + return SymbolInfo; + } + + // Method to create basic shape node + private Node CreateBasicNode(string id, NodeBasicShapes type) + { + Node node = new Node() + { + ID = id, + Shape = new BasicShape() + { + Type = shapes.Basic, + Shape = type + }, + SearchTags = new List() {"Basic" }, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" } + }; + return node; + } + + // Method to create flow shape node + private Node CreateFlowNode(string id, NodeFlowShapes type) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() + { + Type = shapes.Flow, + Shape = type + }, + SearchTags = new List() {"flow" }, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" } + }; + return node; + } + + // Method to create connector + private Connector CreateConnector(string id, ConnectorSegmentType type, DecoratorShape shape) + { + Connector connector = new Connector() + { + ID = id, + Type = type, + SearchTags = new List() {"connector" }, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 40, Y = 40 }, + TargetDecorator = new DecoratorSettings() + { + Shape = shape, + Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" } + }, + Style = new ShapeStyle() { StrokeWidth = 2, StrokeColor = "#757575" } + }; + return connector; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/SearchTag.razor b/Diagram/Server/Pages/SymbolPalette/SearchTag.razor new file mode 100644 index 0000000..97e11b8 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/SearchTag.razor @@ -0,0 +1,58 @@ +@page "/SearchTag" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfSymbolPaletteComponent SymbolPalette; + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); + CreatePaletteNode(NodeBasicShapes.Ellipse, "Ellipse"); + CreatePaletteNode(NodeBasicShapes.Star, "Star"); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Basic Shapes", ID = "Basic Shapes" }, + }; + } + + private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + { + Node node = new Node() + { + ID = id, + SearchTags = new List() { "Basic" }, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = basicShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/SelectionChanged.razor b/Diagram/Server/Pages/SymbolPalette/SelectionChanged.razor new file mode 100644 index 0000000..125903b --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/SelectionChanged.razor @@ -0,0 +1,80 @@ +@page "/SelectionChanged" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Buttons + +
+
+
+ + +
+
+
+ +@code { + //Define symbolpreview + DiagramSize SymbolPreview; + //Define symbolmargin + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + double symbolwidth = 60; + double symbolheight = 60; + //Reference the symbolpalette + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + Node node1 = new Node() + { + ID = "Rectangle", + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node2 = new Node() + { + ID = "Ellipse", + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node3 = new Node() + { + ID = "Diamond", + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Diamond }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node1); + PaletteNodes.Add(node2); + PaletteNodes.Add(node3); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteNodes,Title="Basic Shapes",ID="Basic Shapes" }, + }; + } + + private void SelectionChangedMethod(PaletteSelectionChangedEventArgs args) + { + if(args.OldValue.Contains("Rectangle")) + { + + } + if(args.NewValue.Contains("Ellipse")) + { + + } + } +} + diff --git a/Diagram/Server/Pages/SymbolPalette/ShowToolTip.razor b/Diagram/Server/Pages/SymbolPalette/ShowToolTip.razor new file mode 100644 index 0000000..73bddde --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/ShowToolTip.razor @@ -0,0 +1,175 @@ +@page "/showTooltip" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + +
+
+
+ + +
+
+ + +
+
+
+ +
+
+ +@code { + // Controls tooltip visibility for symbols at runtime. + private bool showTooltip = false; + private SfSymbolPaletteComponent? symbolPalette; + private SfDiagramComponent? diagram; + private SymbolMargin symbolMargin = new SymbolMargin() + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + + public DiagramObjectCollection Palettes { get; set; } = new DiagramObjectCollection(); + public DiagramObjectCollection FlowShapesPalette { get; set; } = new DiagramObjectCollection(); + public DiagramObjectCollection BasicShapesPalette { get; set; } = new DiagramObjectCollection(); + public DiagramObjectCollection ConnectorsPalette { get; set; } = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + // Initialize all palette models with predefined shapes. + InitPaletteModel(); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender && symbolPalette != null && diagram != null) + { + // Set diagram as drag-drop target for symbol palette. + symbolPalette.Targets = new DiagramObjectCollection { diagram }; + } + } + + // Configures symbol tooltip display based on checkbox state. + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + // Enable/disable tooltip display based on user preference at runtime. + return new SymbolInfo { ShowTooltip = showTooltip }; + } + + private void InitPaletteModel() + { + // Add flow shapes to palette. + AddFlowShape(NodeFlowShapes.Terminator, "Terminator", 0); + AddFlowShape(NodeFlowShapes.Decision, "Decision", 1); + AddFlowShape(NodeFlowShapes.Process, "Process", 2); + AddFlowShape(NodeFlowShapes.Document, "Document", 3); + + // Add basic shapes to palette. + AddBasicShape(NodeBasicShapes.Rectangle, "Rectangle", 0); + AddBasicShape(NodeBasicShapes.Ellipse, "Ellipse", 1); + AddBasicShape(NodeBasicShapes.Pentagon, "Pentagon", 2); + AddBasicShape(NodeBasicShapes.Hexagon, "Hexagon", 3); + + // Add connectors to palette. + AddConnector("Orthogonal", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow, 0); + AddConnector("Straight", ConnectorSegmentType.Straight, DecoratorShape.Arrow, 1); + AddConnector("Bezier", ConnectorSegmentType.Bezier, DecoratorShape.Arrow, 2); + AddConnector("StraightOpp", ConnectorSegmentType.Straight, DecoratorShape.None, 3); + + // Create palette collection with all shape categories. + Palettes = new DiagramObjectCollection + { + new Palette { Symbols = FlowShapesPalette, Title = "Flow Shapes", ID = "FlowShapes", IsExpanded = true }, + new Palette { Symbols = BasicShapesPalette, Title = "Basic Shapes", ID = "BasicShapes", IsExpanded = true }, + new Palette { Symbols = ConnectorsPalette, Title = "Connectors", ID = "Connectors", IsExpanded = true } + }; + } + + private void AddFlowShape(NodeFlowShapes shape, string id, int index) + { + Node node = new Node + { + ID = id, + Shape = new FlowShape { Type = NodeShapes.Flow, Shape = shape }, + Width = 60, + Height = 60, + Style = new ShapeStyle { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip + }; + // Add tooltip for even-indexed shapes only. + if (index % 2 == 0) + { + node.Tooltip = new DiagramTooltip + { + Content = $"This is {id} (Flow)", + ShowTipPointer = true, + Position = Position.RightCenter + }; + } + FlowShapesPalette.Add(node); + } + + private void AddBasicShape(NodeBasicShapes shapeType, string id, int index) + { + Node node = new Node + { + ID = id, + Width = 60, + Height = 60, + Shape = new BasicShape + { + Type = NodeShapes.Basic, + Shape = shapeType, + CornerRadius = 10 // Rounded corners for visual appeal. + }, + Style = new ShapeStyle { Fill = "#9CCC65", StrokeColor = "#558B2F" }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip + }; + // Add tooltip for even-indexed shapes only. + if (index % 2 == 0) + { + node.Tooltip = new DiagramTooltip + { + Content = $"This is {id} (Basic)", + ShowTipPointer = true, + Position = Position.RightCenter + }; + } + BasicShapesPalette.Add(node); + } + + private void AddConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape, int index) + { + Connector connector = new Connector + { + ID = id, + Type = type, + SourcePoint = new DiagramPoint { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint { X = 60, Y = 60 }, + Style = new ShapeStyle { StrokeWidth = 2, StrokeColor = "#757575" }, + TargetDecorator = new DecoratorSettings + { + Shape = decoratorShape, + Style = new ShapeStyle { StrokeColor = "#757575", Fill = "#757575" } + }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip + }; + // Add tooltip for even-indexed connectors only. + if (index % 2 == 0) + { + connector.Tooltip = new DiagramTooltip + { + Content = $"This is {id} (Connector)", + Position = Position.RightCenter, + ShowTipPointer = true + }; + } + ConnectorsPalette.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/SymbolDescriptionSample.razor b/Diagram/Server/Pages/SymbolPalette/SymbolDescriptionSample.razor new file mode 100644 index 0000000..f9a9254 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/SymbolDescriptionSample.razor @@ -0,0 +1,64 @@ +@page "/SymbolDescription" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfSymbolPaletteComponent SymbolPalette; + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Basic Shapes", ID = "Basic Shapes" }, + }; + } + + private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = basicShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + SymbolInfo SymbolInfo = new SymbolInfo(); + string text = null; + text = (symbol as Node).ID; + SymbolInfo.Description = new SymbolDescription() { Text = text }; + return SymbolInfo; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/SymbolPaletteTemplate.razor b/Diagram/Server/Pages/SymbolPalette/SymbolPaletteTemplate.razor new file mode 100644 index 0000000..c891ebf --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/SymbolPaletteTemplate.razor @@ -0,0 +1,33 @@ +@page "/SymbolPaletteTemplate" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + + + + + + + + + +@code { + DiagramObjectCollection Symbols = new DiagramObjectCollection(); + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Symbols = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "Nativenode", + Shape = new Shape() { Type = NodeShapes.SVG }, + }; + Symbols.Add(node as NodeBase); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =Symbols,Title="Template Shape" }, + }; + } +} diff --git a/Diagram/Server/Pages/SymbolPalette/SymbolPaletteTooltip.razor b/Diagram/Server/Pages/SymbolPalette/SymbolPaletteTooltip.razor new file mode 100644 index 0000000..070d699 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/SymbolPaletteTooltip.razor @@ -0,0 +1,277 @@ +@page "/SymbolPaletteTooltip" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette +@using Syncfusion.Blazor.Popups + +
+ + +
+
+
+
+
+ + +
+
+
+ + +
+
+
+
+ +@code +{ + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + SfDiagramComponent diagram; + SfSymbolPaletteComponent SymbolPalette; + //Define nodes collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Define connectors collection. + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Define palettes collection. + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + // Defines palette's flow-shape collection. + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + // Defines palette's group collection. + DiagramObjectCollection PaletteGroup = new DiagramObjectCollection(); + // Defines palette's connector collection. + DiagramObjectCollection PaletteConnectors = new DiagramObjectCollection(); + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + SymbolPalette.Targets = new DiagramObjectCollection() { }; + SymbolPalette.Targets.Add(diagram); + } + + protected override void OnInitialized() + { + InitPaletteModel(); + } + + private void InitPaletteModel() + { + CreatePaletteNode(NodeFlowShapes.Terminator, "Terminator"); + CreatePaletteConnector("Link1", ConnectorSegmentType.Orthogonal, DecoratorShape.Arrow); + CreatePaletteGroup(); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols = PaletteNodes,Title = "Flow Shapes", ID = "Flow Shapes" }, + new Palette(){Symbols = PaletteConnectors,Title = "Connectors", IsExpanded = true}, + new Palette(){Symbols = PaletteGroup,Title = "Group Shapes", IsExpanded = true} + }; + } + + private void CreatePaletteNode(NodeFlowShapes flowShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = flowShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Tooltip = new DiagramTooltip() + { + Content = "This is Terminator", + ShowTipPointer = true, + Position = Position.RightCenter + }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip + }; + PaletteNodes.Add(node); + } + + private void CreatePaletteConnector(string id, ConnectorSegmentType type, DecoratorShape decoratorShape) + { + Connector connector = new Connector() + { + ID = id, + Type = type, + SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, + TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, + Style = new ShapeStyle() { StrokeWidth = 1, StrokeColor = "#757575" }, + TargetDecorator = new DecoratorSettings() + { + Shape = decoratorShape, + Style = new ShapeStyle() { StrokeColor = "#757575", Fill = "#757575" } + }, + Tooltip = new DiagramTooltip() + { + Content = "This is Orthogonal", + ShowTipPointer = true, + Position = Position.BottomCenter + }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip + }; + PaletteConnectors.Add(connector); + } + + private void CreatePaletteGroup() + { + Node node1 = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 100, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }, + Style = new ShapeStyle() { Fill = "#6495ed" }, + }; + PaletteGroup.Add(node1); + PaletteGroup.Add(node2); + NodeGroup group = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" } + }; + PaletteGroup.Add(group); + } + + public void DragDrop(DropEventArgs args) + { + (args.Element as Node).Tooltip.Content = "This is diagram Tooltip"; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/SymbolPalette/SymbolPreview.razor b/Diagram/Server/Pages/SymbolPalette/SymbolPreview.razor new file mode 100644 index 0000000..7dc8a30 --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/SymbolPreview.razor @@ -0,0 +1,204 @@ +@page "/SymbolPreview" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+ + +
+
+
+
+
+ + +
+
+
+ + +
+
+
+
+ +@code { + //Define symbolpreview + DiagramSize Preview; + //Define SymbolMargin + SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + //Reference the diagram + SfDiagramComponent diagram; + //Reference the symbol palette + SfSymbolPaletteComponent symbolpalette; + + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + protected override async Task OnAfterRenderAsync(bool firstRender) + { + symbolpalette.Targets = new DiagramObjectCollection() { }; + symbolpalette.Targets.Add(diagram); + } + + private void InitPaletteModel() + { + Preview = new DiagramSize(); + Preview.Width = 100; + Preview.Height = 100; + + CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteNodes,Title="Basic Shapes",ID="Basic Shapes" }, + }; + } + + //Method to create palette node + private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = basicShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + +} diff --git a/Diagram/Server/Pages/SymbolPalette/SymbolStretch.razor b/Diagram/Server/Pages/SymbolPalette/SymbolStretch.razor new file mode 100644 index 0000000..b244bdc --- /dev/null +++ b/Diagram/Server/Pages/SymbolPalette/SymbolStretch.razor @@ -0,0 +1,74 @@ +@page "/SymbolStretch" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Diagram.SymbolPalette + +
+
+
+ + +
+
+
+ +@code { + //Define symbolpreview + DiagramSize SymbolPreview; + //Define SymbolMargin + SymbolMargin SymbolMargin = new SymbolMargin + { + Left = 15, + Right = 15, + Top = 15, + Bottom = 15 + }; + //Reference the symbolpalette + SfSymbolPaletteComponent symbolpalette; + + //Define palattes collection + DiagramObjectCollection Palettes = new DiagramObjectCollection(); + + // Defines palette's flow-shape collection + DiagramObjectCollection PaletteNodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + InitPaletteModel(); + } + private void InitPaletteModel() + { + Palettes = new DiagramObjectCollection(); + + PaletteNodes = new DiagramObjectCollection(); + CreatePaletteNode(NodeBasicShapes.Rectangle, "Rectangle"); + + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =PaletteNodes,Title="Basic Shapes",ID="Basic Shapes" }, + }; + } + //Method to create palette node + private void CreatePaletteNode(NodeBasicShapes basicShape, string id) + { + Node node = new Node() + { + ID = id, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = basicShape }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + PaletteNodes.Add(node); + } + //Method to getsymbolinfo + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) + { + SymbolInfo SymbolInfo = new SymbolInfo(); + //SymbolInfo.Fit = true; + + string text = null; + text = (symbol as Node).ID; + SymbolInfo.Description = new SymbolDescription() { Text = text }; + return SymbolInfo; + } +} diff --git a/Diagram/Server/Pages/Tooltip/StickyForConnector.razor b/Diagram/Server/Pages/Tooltip/StickyForConnector.razor new file mode 100644 index 0000000..b6bb154 --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/StickyForConnector.razor @@ -0,0 +1,27 @@ +@page "/StickyForConnector" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + +@code +{ + //Define diagram's connectors collection + DiagramObjectCollection connectors; + //Refrence the diagram + SfDiagramComponent diagram; + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + connectors = new DiagramObjectCollection(); + Connector connector = new Connector() + { + ID = "Connector1", + SourcePoint = new DiagramPoint() { X = 100, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 100 }, + Tooltip = new DiagramTooltip() { Content = "Tooltip", IsSticky=true }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + connectors.Add(connector); + } +} diff --git a/Diagram/Server/Pages/Tooltip/StickyForNode.razor b/Diagram/Server/Pages/Tooltip/StickyForNode.razor new file mode 100644 index 0000000..6840aaa --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/StickyForNode.razor @@ -0,0 +1,34 @@ +@page "/StickyForNode" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + //Reference the diagram + SfDiagramComponent diagram; + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "Tooltip", IsSticky = true }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TipPointerForConnectorTooltip.razor b/Diagram/Server/Pages/Tooltip/TipPointerForConnectorTooltip.razor new file mode 100644 index 0000000..a3fb3a6 --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TipPointerForConnectorTooltip.razor @@ -0,0 +1,34 @@ +@page "/TipPointerForConnectorTooltip" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + +@code +{ + //Define diagram's connectors collection + DiagramObjectCollection connector; + + protected override void OnInitialized() + { + //Intialize diagram's connectors collection + connector = new DiagramObjectCollection(); + Connector connectors = new Connector() + { + ID = "Connector1", + SourcePoint = new DiagramPoint() { X = 500, Y = 500 }, + TargetPoint = new DiagramPoint() { X = 600, Y = 400 }, + //Set tooltip + Tooltip = new DiagramTooltip() { Content = "ConnectorTooltip", ShowTipPointer = true }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + connector.Add(connectors); + } + //Change the TipPointer at run time. + private void TipPointerChange() + { + connector[0].Tooltip.ShowTipPointer = false; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TipPointerForNodeTooltip.razor b/Diagram/Server/Pages/Tooltip/TipPointerForNodeTooltip.razor new file mode 100644 index 0000000..4f4cb4b --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TipPointerForNodeTooltip.razor @@ -0,0 +1,41 @@ +@page "/TipPointerForNodeTooltip" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + //Set tooltip + Tooltip = new DiagramTooltip() { Content = "NodeTooltip", ShowTipPointer = true }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + nodes.Add(node); + } + //Change TipPointer at run time. + private void TipPointerChange() + { + nodes[0].Tooltip.ShowTipPointer = false; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipAnimationForConnector.razor b/Diagram/Server/Pages/Tooltip/TooltipAnimationForConnector.razor new file mode 100644 index 0000000..01132b9 --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipAnimationForConnector.razor @@ -0,0 +1,45 @@ +@page "/TooltipAnimationForConnector" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + +@code +{ + //Define diagram's connectors collection + DiagramObjectCollection connector; + + protected override void OnInitialized() + { + //Initialize diagram's connectors collection + connector = new DiagramObjectCollection(); + Connector connectors = new Connector() + { + ID = "Connector1", + SourcePoint = new DiagramPoint() { X = 500, Y = 500 }, + TargetPoint = new DiagramPoint() { X = 600, Y = 400 }, + Tooltip = new DiagramTooltip() + { + Content = "ConnectorTooltip", + AnimationSettings = new AnimationModel() + { + Open = new TooltipAnimationSettings() { Effect = Effect.None }, + Close = new TooltipAnimationSettings() { Effect = Effect.None } + } + }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + connector.Add(connectors); + } + //Change the Animation at run time. + private void AnimationChange() + { + connector[0].Tooltip.AnimationSettings = new AnimationModel() + { + Open = new TooltipAnimationSettings() { Effect = Effect.ZoomIn, Duration = 500 }, + Close = new TooltipAnimationSettings() { Effect = Effect.ZoomOut, Duration = 500 } + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipAnimationForNode.razor b/Diagram/Server/Pages/Tooltip/TooltipAnimationForNode.razor new file mode 100644 index 0000000..38bed96 --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipAnimationForNode.razor @@ -0,0 +1,52 @@ +@page "/TooltipAnimationForNode" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Initialize the diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() + { + Content = "NodeTooltip", + AnimationSettings = new AnimationModel() + { + Open = new TooltipAnimationSettings() { Effect = Effect.None }, + Close = new TooltipAnimationSettings() { Effect = Effect.None } + } + }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + nodes.Add(node); + } + //Change the Animation at run time. + private void AnimationChange() + { + nodes[0].Tooltip.AnimationSettings = new AnimationModel() + { + Open = new TooltipAnimationSettings() { Effect = Effect.FadeZoomIn, Duration = 100 }, + Close = new TooltipAnimationSettings() { Effect = Effect.FadeZoomOut, Duration = 50 } + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipContentForConnector.razor b/Diagram/Server/Pages/Tooltip/TooltipContentForConnector.razor new file mode 100644 index 0000000..f38298d --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipContentForConnector.razor @@ -0,0 +1,31 @@ +@page "/TooltipContentForConnector" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + +@code +{ + DiagramObjectCollection connector; + + protected override void OnInitialized() + { + connector = new DiagramObjectCollection(); + Connector connectors = new Connector() + { + ID = "Connector1", + SourcePoint = new DiagramPoint() { X = 500, Y = 500 }, + TargetPoint = new DiagramPoint() { X = 600, Y = 400 }, + Tooltip = new DiagramTooltip() { Content = "ConnectorTooltip" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + connector.Add(connectors); + } + //Change Content at run time. + private void ContentChange() + { + connector[0].Tooltip.Content = "UpdateTooltipContent"; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipContentForNode.razor b/Diagram/Server/Pages/Tooltip/TooltipContentForNode.razor new file mode 100644 index 0000000..19d4866 --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipContentForNode.razor @@ -0,0 +1,40 @@ +@page "/TooltipContentForNode" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "NodeTooltip" }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + nodes.Add(node); + } + //Change Content at run time. + private void ContentChange() + { + nodes[0].Tooltip.Content = "UpdateTooltipContent"; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipForSpecificConnector.razor b/Diagram/Server/Pages/Tooltip/TooltipForSpecificConnector.razor new file mode 100644 index 0000000..85846ba --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipForSpecificConnector.razor @@ -0,0 +1,26 @@ +@page "/TooltipForSpecificConnector" + + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups + +@code +{ + //Define diagram's connectors collection + DiagramObjectCollection connector; + + protected override void OnInitialized() + { + //Intialize diagram's connectors collection + connector = new DiagramObjectCollection(); + Connector connectors = new Connector() + { + ID = "Connector1", + SourcePoint = new DiagramPoint() { X = 500, Y = 500 }, + TargetPoint = new DiagramPoint() { X = 600, Y = 400 }, + Tooltip = new DiagramTooltip() { Content = "ConnectorTooltip" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + connector.Add(connectors); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipForSpecificNode.razor b/Diagram/Server/Pages/Tooltip/TooltipForSpecificNode.razor new file mode 100644 index 0000000..cfe7113 --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipForSpecificNode.razor @@ -0,0 +1,32 @@ +@page "/TooltipForSpecificNode" + + +@using Syncfusion.Blazor.Diagram + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "NodeTooltip" }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipOpenModeForConnector.razor b/Diagram/Server/Pages/Tooltip/TooltipOpenModeForConnector.razor new file mode 100644 index 0000000..51ce321 --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipOpenModeForConnector.razor @@ -0,0 +1,67 @@ +@page "/TooltipOpenModeForConnector" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + + +@code +{ + //Define diagram's connectors collection + DiagramObjectCollection connector; + //Refrence the diagram + SfDiagramComponent diagram; + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + connector = new DiagramObjectCollection(); + Connector connectors = new Connector() + { + ID = "Connector1", + SourcePoint = new DiagramPoint() { X = 100, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 100 }, + Tooltip = new DiagramTooltip() { Content = "Auto", OpensOn = "Auto" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + Connector connectors1 = new Connector() + { + ID = "Connector2", + SourcePoint = new DiagramPoint() { X = 300, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 100 }, + Tooltip = new DiagramTooltip() { Content = "Hover", OpensOn = "Hover" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + Connector connectors2 = new Connector() + { + ID = "Connector3", + SourcePoint = new DiagramPoint() { X = 500, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 600, Y = 100 }, + Tooltip = new DiagramTooltip() { Content = "Custom", OpensOn = "Custom" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + Connector connectors3 = new Connector() + { + ID = "Connector4", + SourcePoint = new DiagramPoint() { X = 700, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 800, Y = 100 }, + Tooltip = new DiagramTooltip() { Content = "Click", OpensOn = "Click" }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + connector.Add(connectors); + connector.Add(connectors1); + connector.Add(connectors2); + connector.Add(connectors3); + } + //Method to show tooltip + private void show() + { + _ = diagram.ShowTooltipAsync(diagram.Connectors[2] as NodeBase); + } + //Method to hide tooltip + private void hide() + { + _ = diagram.HideTooltipAsync(diagram.Connectors[2] as NodeBase); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipOpenModeForNode.razor b/Diagram/Server/Pages/Tooltip/TooltipOpenModeForNode.razor new file mode 100644 index 0000000..b6ce8d2 --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipOpenModeForNode.razor @@ -0,0 +1,96 @@ +@page "/TooltipOpenModeForNode" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + //Reference the diagram + SfDiagramComponent diagram; + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "Auto", OpensOn = "Auto", Position = Position.BottomCenter }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + Node node1 = new Node() + { + ID = "node2", + OffsetX = 250, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "Hover", OpensOn = "Hover" }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + Node node2 = new Node() + { + ID = "node3", + OffsetX = 400, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "Custom", OpensOn = "Custom" }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + Node node3 = new Node() + { + ID = "node4", + OffsetX = 550, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "Click", OpensOn = "Click" }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + nodes.Add(node); + nodes.Add(node1); + nodes.Add(node2); + nodes.Add(node3); + } + //Method to show tooltip + private void show() + { + _ = diagram.ShowTooltipAsync(diagram.Nodes[2] as NodeBase); + } + //Method to hide tooltip + private void hide() + { + _ = diagram.HideTooltipAsync(diagram.Nodes[2] as NodeBase); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipPositionForConnector.razor b/Diagram/Server/Pages/Tooltip/TooltipPositionForConnector.razor new file mode 100644 index 0000000..4d3f357 --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipPositionForConnector.razor @@ -0,0 +1,34 @@ +@page "/TooltipPositionForConnector" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + +@code +{ + //Define diagram's connectors collection + DiagramObjectCollection connector; + + protected override void OnInitialized() + { + //Intialize diagram's connectors collection + + connector = new DiagramObjectCollection(); + Connector connectors = new Connector() + { + ID = "Connector1", + SourcePoint = new DiagramPoint() { X = 500, Y = 500 }, + TargetPoint = new DiagramPoint() { X = 600, Y = 400 }, + Tooltip = new DiagramTooltip() { Content = "ConnectorTooltip", Position = Position.TopCenter }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + connector.Add(connectors); + } + //Change position at run time. + private void PositionChange() + { + connector[0].Tooltip.Position = Position.RightCenter; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipPositionforNode.razor b/Diagram/Server/Pages/Tooltip/TooltipPositionforNode.razor new file mode 100644 index 0000000..d46b216 --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipPositionforNode.razor @@ -0,0 +1,41 @@ +@page "/TooltipPositionforNode" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + +@code +{ + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip() { Content = "NodeTooltip", Position = Position.TopCenter }, + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + nodes.Add(node); + } + //Change position at run time. + private void PositionChange() + { + nodes[0].Tooltip.Position = Position.RightCenter; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipTemplateForConnector.razor b/Diagram/Server/Pages/Tooltip/TooltipTemplateForConnector.razor new file mode 100644 index 0000000..1d99fdd --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipTemplateForConnector.razor @@ -0,0 +1,38 @@ +@page "/TooltipTemplateForConnector" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups +@using Syncfusion.Blazor.Buttons + + + + + @{ + if (context is Connector) + { +

Product Name : Diagram

Element: Node

Content: Node Tooltip

+ } + } + + + + @code + { + //Define diagram's connectors collection + DiagramObjectCollection connector; + + protected override void OnInitialized() + { + //Intialize diagram's connectors collection + + connector = new DiagramObjectCollection(); + Connector connectors = new Connector() + { + ID = "Connector1", + SourcePoint = new DiagramPoint() { X = 500, Y = 500 }, + TargetPoint = new DiagramPoint() { X = 600, Y = 400 }, + Tooltip = new DiagramTooltip(), + Constraints = ConnectorConstraints.Default | ConnectorConstraints.Tooltip, + }; + connector.Add(connectors); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Tooltip/TooltipTemplateForNode.razor b/Diagram/Server/Pages/Tooltip/TooltipTemplateForNode.razor new file mode 100644 index 0000000..dab706d --- /dev/null +++ b/Diagram/Server/Pages/Tooltip/TooltipTemplateForNode.razor @@ -0,0 +1,44 @@ +@page "/TooltipTemplateForNode" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + @{ + if (context is Node) + { +

Product Name : Diagram

Element: Node

Content: Node Tooltip

+ } + } + + + + @code + { + //Define diagram's nodes collection + DiagramObjectCollection nodes; + + protected override void OnInitialized() + { + //Intialize diagram's nodes collection + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" + }, + Tooltip = new DiagramTooltip(), + Constraints = NodeConstraints.Default | NodeConstraints.Tooltip, + }; + nodes.Add(node); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UMLSequenceDiagram/CreateActivationBox.razor b/Diagram/Server/Pages/UMLSequenceDiagram/CreateActivationBox.razor new file mode 100644 index 0000000..e67195f --- /dev/null +++ b/Diagram/Server/Pages/UMLSequenceDiagram/CreateActivationBox.razor @@ -0,0 +1,69 @@ +@page "/CreateActivationBox" +@using Syncfusion.Blazor.Diagram + + + + + +@code { + private SfDiagramComponent Diagram; + private UmlSequenceDiagramModel DiagramModel; + + protected override void OnInitialized() + { + // Create participants with an activation box + List participants = new List() + { + new UmlSequenceParticipant() + { + ID = "User", + Content = "User", + IsActor = true + }, + new UmlSequenceParticipant() + { + ID = "System", + Content = "System", + IsActor = false, + ShowDestructionMarker = true, + ActivationBoxes = new List() + { + new UmlSequenceActivationBox() + { + ID = "ActivateSystem", + StartMessageID = "MSG1", + EndMessageID = "MSG2" + } + } + } + }; + + // Create messages + List messages = new List() + { + new UmlSequenceMessage() + { + ID = "MSG1", + Content = "Login Request", + FromParticipantID = "User", + ToParticipantID = "System", + MessageType = UmlSequenceMessageType.Synchronous + }, + new UmlSequenceMessage() + { + ID = "MSG2", + Content = "Login Response", + FromParticipantID = "System", + ToParticipantID = "User", + MessageType = UmlSequenceMessageType.Reply + } + }; + + // Initialize the model + DiagramModel = new UmlSequenceDiagramModel() + { + Participants = participants, + Messages = messages + }; + } +} diff --git a/Diagram/Server/Pages/UMLSequenceDiagram/CreateFragments.razor b/Diagram/Server/Pages/UMLSequenceDiagram/CreateFragments.razor new file mode 100644 index 0000000..93e566b --- /dev/null +++ b/Diagram/Server/Pages/UMLSequenceDiagram/CreateFragments.razor @@ -0,0 +1,95 @@ +@page "/CreateFragments" +@using Syncfusion.Blazor.Diagram + + + + + +@code { + private SfDiagramComponent Diagram; + private UmlSequenceDiagramModel DiagramModel; + + protected override void OnInitialized() + { + // Participants + List participants = new List() + { + new UmlSequenceParticipant() { ID = "Customer", Content = "Customer", IsActor = true }, + new UmlSequenceParticipant() { ID = "OrderSystem", Content = "Order System", IsActor = false }, + new UmlSequenceParticipant() { ID = "PaymentGateway", Content = "Payment Gateway", IsActor = false } + }; + + // Messages + List messages = new List() + { + new UmlSequenceMessage() { ID = "MSG1", Content = "Place Order", FromParticipantID = "Customer", ToParticipantID = "OrderSystem", MessageType = UmlSequenceMessageType.Synchronous }, + new UmlSequenceMessage() { ID = "MSG2", Content = "Check Stock Availability", FromParticipantID = "OrderSystem", ToParticipantID = "OrderSystem", MessageType = UmlSequenceMessageType.Synchronous }, + new UmlSequenceMessage() { ID = "MSG3", Content = "Stock Available", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", MessageType = UmlSequenceMessageType.Reply }, + new UmlSequenceMessage() { ID = "MSG4", Content = "Process Payment", FromParticipantID = "OrderSystem", ToParticipantID = "PaymentGateway", MessageType = UmlSequenceMessageType.Synchronous }, + new UmlSequenceMessage() { ID = "MSG5", Content = "Payment Successful", FromParticipantID = "PaymentGateway", ToParticipantID = "OrderSystem", MessageType = UmlSequenceMessageType.Reply }, + new UmlSequenceMessage() { ID = "MSG6", Content = "Order Confirmed and Shipped", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", MessageType = UmlSequenceMessageType.Reply }, + new UmlSequenceMessage() { ID = "MSG7", Content = "Payment Failed", FromParticipantID = "PaymentGateway", ToParticipantID = "OrderSystem", MessageType = UmlSequenceMessageType.Reply }, + new UmlSequenceMessage() { ID = "MSG8", Content = "Retry Payment", FromParticipantID = "OrderSystem", ToParticipantID = "Customer", MessageType = UmlSequenceMessageType.Reply } + }; + + // Fragments + List fragments = new List() + { + new UmlSequenceFragment() + { + ID = "Frag3", + FragmentType = UmlSequenceFragmentType.Loop, + Conditions = new List + { + new UmlSequenceFragmentCondition() + { + Content = "while attempts less than 3", + Fragments = new List() + { + new UmlSequenceFragment() + { + ID = "Frag1", + FragmentType = UmlSequenceFragmentType.Optional, + Conditions = new List() + { + new UmlSequenceFragmentCondition() + { + Content = "if item is in stock", + MessageIds = new List { "MSG4" } + } + } + }, + new UmlSequenceFragment() + { + ID = "Frag2", + FragmentType = UmlSequenceFragmentType.Alternative, + Conditions = new List() + { + new UmlSequenceFragmentCondition() + { + Content = "if payment is successful", + MessageIds = new List() { "MSG5", "MSG6" } + }, + new UmlSequenceFragmentCondition() + { + Content = "if payment fails", + MessageIds = new List() { "MSG7", "MSG8" } + } + } + } + } + } + } + } + }; + + // Assign model + DiagramModel = new UmlSequenceDiagramModel() + { + SpaceBetweenParticipants = 300, + Participants = participants, + Messages = messages, + Fragments = fragments + }; + } +} diff --git a/Diagram/Server/Pages/UMLSequenceDiagram/CreateMessage.razor b/Diagram/Server/Pages/UMLSequenceDiagram/CreateMessage.razor new file mode 100644 index 0000000..8fa90ee --- /dev/null +++ b/Diagram/Server/Pages/UMLSequenceDiagram/CreateMessage.razor @@ -0,0 +1,105 @@ +@page "/CreateMessage" +@using Syncfusion.Blazor.Diagram + + + + + +@code { + private SfDiagramComponent Diagram; + private UmlSequenceDiagramModel DiagramModel; + + protected override void OnInitialized() + { + // Create participants + List participants = new List() + { + new UmlSequenceParticipant() + { + ID = "User", + Content = "User", + IsActor = true + }, + new UmlSequenceParticipant() + { + ID = "System", + Content = "System", + IsActor = false, + ShowDestructionMarker = true + }, + new UmlSequenceParticipant() + { + ID = "Logger", + Content = "Logger", + IsActor = false, + ShowDestructionMarker = true + }, + new UmlSequenceParticipant() + { + ID = "SessionManager", + Content = "SessionManager", + IsActor = false + } + }; + + // Create messages + List messages = new List() + { + new UmlSequenceMessage() + { + ID = "MSG1", + Content = "Login Request", + FromParticipantID = "User", + ToParticipantID = "System", + MessageType = UmlSequenceMessageType.Synchronous + }, + new UmlSequenceMessage() + { + ID = "MSG2", + Content = "Login Response", + FromParticipantID = "System", + ToParticipantID = "User", + MessageType = UmlSequenceMessageType.Reply + }, + new UmlSequenceMessage() + { + ID = "MSG3", + Content = "Log Event", + FromParticipantID = "System", + ToParticipantID = "Logger", + MessageType = UmlSequenceMessageType.Asynchronous + }, + new UmlSequenceMessage() + { + ID = "MSG4", + Content = "Create Session", + FromParticipantID = "System", + ToParticipantID = "SessionManager", + MessageType = UmlSequenceMessageType.Create + }, + new UmlSequenceMessage() + { + ID = "MSG5", + Content = "Delete Session", + FromParticipantID = "System", + ToParticipantID = "SessionManager", + MessageType = UmlSequenceMessageType.Delete + }, + new UmlSequenceMessage() + { + ID = "MSG6", + Content = "Validate Inputs", + FromParticipantID = "System", + ToParticipantID = "System", + MessageType = UmlSequenceMessageType.Self + } + }; + + // Initialize UML Sequence Diagram model + DiagramModel = new UmlSequenceDiagramModel() + { + Participants = participants, + Messages = messages + }; + } +} diff --git a/Diagram/Server/Pages/UMLSequenceDiagram/CreateParticipant.razor b/Diagram/Server/Pages/UMLSequenceDiagram/CreateParticipant.razor new file mode 100644 index 0000000..ed3cab1 --- /dev/null +++ b/Diagram/Server/Pages/UMLSequenceDiagram/CreateParticipant.razor @@ -0,0 +1,38 @@ +@page "/CreateParticipant" +@using Syncfusion.Blazor.Diagram + + + + + +@code { + private SfDiagramComponent Diagram; + private UmlSequenceDiagramModel DiagramModel; + + protected override void OnInitialized() + { + // Create participants + List participants = new List() + { + new UmlSequenceParticipant() + { + ID = "User", + Content = "User", + IsActor = true + }, + new UmlSequenceParticipant() + { + ID = "System", + Content = "System", + IsActor = false, + ShowDestructionMarker = true + } + }; + + // Initialize the UML sequence diagram model + DiagramModel = new UmlSequenceDiagramModel() + { + Participants = participants + }; + } +} diff --git a/Diagram/Server/Pages/UMLSequenceDiagram/SpaceBetweenParticipants.razor b/Diagram/Server/Pages/UMLSequenceDiagram/SpaceBetweenParticipants.razor new file mode 100644 index 0000000..fdb1284 --- /dev/null +++ b/Diagram/Server/Pages/UMLSequenceDiagram/SpaceBetweenParticipants.razor @@ -0,0 +1,106 @@ +@page "/SpaceBetweenParticipants" +@using Syncfusion.Blazor.Diagram + + + + + +@code { + private SfDiagramComponent Diagram; + private UmlSequenceDiagramModel DiagramModel; + + protected override void OnInitialized() + { + // Create participants + List participants = new List() + { + new UmlSequenceParticipant() + { + ID = "User", + Content = "User", + IsActor = true + }, + new UmlSequenceParticipant() + { + ID = "System", + Content = "System", + IsActor = false, + ShowDestructionMarker = true + }, + new UmlSequenceParticipant() + { + ID = "Logger", + Content = "Logger", + IsActor = false, + ShowDestructionMarker = true + }, + new UmlSequenceParticipant() + { + ID = "SessionManager", + Content = "SessionManager", + IsActor = false + } + }; + + // Create messages + List messages = new List() + { + new UmlSequenceMessage() + { + ID = "MSG1", + Content = "Login Request", + FromParticipantID = "User", + ToParticipantID = "System", + MessageType = UmlSequenceMessageType.Synchronous + }, + new UmlSequenceMessage() + { + ID = "MSG2", + Content = "Login Response", + FromParticipantID = "System", + ToParticipantID = "User", + MessageType = UmlSequenceMessageType.Reply + }, + new UmlSequenceMessage() + { + ID = "MSG3", + Content = "Log Event", + FromParticipantID = "System", + ToParticipantID = "Logger", + MessageType = UmlSequenceMessageType.Asynchronous + }, + new UmlSequenceMessage() + { + ID = "MSG4", + Content = "Create Session", + FromParticipantID = "System", + ToParticipantID = "SessionManager", + MessageType = UmlSequenceMessageType.Create + }, + new UmlSequenceMessage() + { + ID = "MSG5", + Content = "Delete Session", + FromParticipantID = "System", + ToParticipantID = "SessionManager", + MessageType = UmlSequenceMessageType.Delete + }, + new UmlSequenceMessage() + { + ID = "MSG6", + Content = "Validate Inputs", + FromParticipantID = "System", + ToParticipantID = "System", + MessageType = UmlSequenceMessageType.Self + } + }; + + // Initialize UML Sequence Diagram model + DiagramModel = new UmlSequenceDiagramModel() + { + SpaceBetweenParticipants = 200, + Participants = participants, + Messages = messages + }; + } +} diff --git a/Diagram/Server/Pages/Undo-Redo/CurrentEntry.razor b/Diagram/Server/Pages/Undo-Redo/CurrentEntry.razor new file mode 100644 index 0000000..a3ddd66 --- /dev/null +++ b/Diagram/Server/Pages/Undo-Redo/CurrentEntry.razor @@ -0,0 +1,40 @@ +@page "/CurrentEntry" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + +@* Initialize Diagram *@ + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node. + nodes.Add(node); + } + public void GetCurrentEntry() + { + Console.WriteLine(diagram.HistoryManager.CurrentEntry); + } +} diff --git a/Diagram/Server/Pages/Undo-Redo/CustomEntry.razor b/Diagram/Server/Pages/Undo-Redo/CustomEntry.razor new file mode 100644 index 0000000..1d168b1 --- /dev/null +++ b/Diagram/Server/Pages/Undo-Redo/CustomEntry.razor @@ -0,0 +1,51 @@ +@page "/CustomEntry" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //Intialize diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + string EventValue = string.Empty; + + int stackLimit = 3; + + protected override void OnInitialized() + { + Dictionary NodeInfo = new Dictionary(); + NodeInfo.Add("nodeInfo", "Central Node"); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + AdditionalInfo = NodeInfo + }; + // Add node + nodes.Add(node); + } + + private void OnCustomEntry() + { + HistoryEntry entry = new HistoryEntry(); + entry.UndoObject = diagram.Nodes[0]; + diagram.AddHistoryEntry(entry); + } + +} diff --git a/Diagram/Server/Pages/Undo-Redo/CustomUndoRedo.razor b/Diagram/Server/Pages/Undo-Redo/CustomUndoRedo.razor new file mode 100644 index 0000000..458879e --- /dev/null +++ b/Diagram/Server/Pages/Undo-Redo/CustomUndoRedo.razor @@ -0,0 +1,60 @@ +@page "/CustomUndoRedo" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + +@* Initialize Diagram *@ + + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + string EventValue = string.Empty; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node. + nodes.Add(node); + } + + private void OnCustomEntry() + { + HistoryEntry entry = new HistoryEntry(); + entry.UndoObject = diagram.Nodes[0]; + diagram.AddHistoryEntry(entry); + } + + private void onCustomUndo(HistoryEntryBase entry) + { + (entry.RedoObject) = entry.UndoObject.Clone() as Node; + (entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID] = "Start"; + EventValue += "UndoObject:" + (entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID]; + } + + private void onCustomRedo(HistoryEntryBase entry) + { + EventValue += "RedoObject:" + (entry.RedoObject as Node).AdditionalInfo[(entry.RedoObject as Node).ID]; + Node current = entry.UndoObject.Clone() as Node; + (entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID] = "Description"; + entry.RedoObject = current; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Undo-Redo/DisableUndoRedo.razor b/Diagram/Server/Pages/Undo-Redo/DisableUndoRedo.razor new file mode 100644 index 0000000..93558b9 --- /dev/null +++ b/Diagram/Server/Pages/Undo-Redo/DisableUndoRedo.razor @@ -0,0 +1,52 @@ +@page "/DisableUndoRedo" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + +@* Initialize Diagram *@ + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + string EventValue = string.Empty; + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node. + nodes.Add(node); + } + + private void DisableUndoRedo1() + { + diagram.HistoryManager.CanRedo = false; + diagram.HistoryManager.CanUndo = false; + } + + private void EnableUndoRedo() + { + diagram.HistoryManager.CanRedo = false; + diagram.HistoryManager.CanUndo = false; + } + +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Undo-Redo/HistoryAdding.razor b/Diagram/Server/Pages/Undo-Redo/HistoryAdding.razor new file mode 100644 index 0000000..5477f49 --- /dev/null +++ b/Diagram/Server/Pages/Undo-Redo/HistoryAdding.razor @@ -0,0 +1,39 @@ +@page "/HistoryAdding" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + // A node is created and stored in the nodes collection. + Node node = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + // Add node. + nodes.Add(node); + } + + private void OnHistoryAdding(HistoryAddingEventArgs entry) + { + // Sets true to cancel undo/redo action. + entry.Cancel = true; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/Undo-Redo/HistoryChange.razor b/Diagram/Server/Pages/Undo-Redo/HistoryChange.razor new file mode 100644 index 0000000..89b5451 --- /dev/null +++ b/Diagram/Server/Pages/Undo-Redo/HistoryChange.razor @@ -0,0 +1,24 @@ +@page "/HistoryChange" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + + protected override void OnInitialized() + { + + } + //Onhistory change event + public void Onhistorychange(HistoryChangedEventArgs args) + { + //causes of history change + var ActionTrigger = args.ActionTrigger; + } +} diff --git a/Diagram/Server/Pages/Undo-Redo/StackLimit.razor b/Diagram/Server/Pages/Undo-Redo/StackLimit.razor new file mode 100644 index 0000000..634c633 --- /dev/null +++ b/Diagram/Server/Pages/Undo-Redo/StackLimit.razor @@ -0,0 +1,40 @@ +@page "/StackLimit" + +@using Syncfusion.Blazor.Diagram + +@* Initialize Diagram *@ + + + + + +@code +{ + SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + int stackLimit = 3; + + protected override void OnInitialized() + { + Node diagramNode = new Node() + { + ID = "node1", + OffsetX = 300, + OffsetY = 140, + Width = 145, + Height = 60, + Style = new ShapeStyle() + { + Fill = "#357BD2", + StrokeColor = "White" + }, + Shape = new FlowShape() + { + Type = NodeShapes.Flow, + Shape = NodeFlowShapes.Terminator + } + }; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/ConnectorFixedUserHandleSample.razor b/Diagram/Server/Pages/UserHandle/ConnectorFixedUserHandleSample.razor new file mode 100644 index 0000000..36f8cef --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/ConnectorFixedUserHandleSample.razor @@ -0,0 +1,43 @@ +@page "/ConnectorFixedUserHandle" + +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + //Intialize diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Connector connector = new Connector() + { + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + Type = ConnectorSegmentType.Orthogonal, + Style = new ShapeStyle() { StrokeColor = "#6495ED" }, + // A fixed user handle is created and stored in fixed user handle collection of Connector. + FixedUserHandles = new DiagramObjectCollection() + { + new ConnectorFixedUserHandle() + { + ID = "user1", + Height = 25, + Width = 25, + Offset = 0.5, + Alignment = FixedUserHandleAlignment.After, + Displacement = new DiagramPoint() { Y = 10 }, + Visibility = true, Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" + } + }, + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/CustomizeFixedUserHandle.razor b/Diagram/Server/Pages/UserHandle/CustomizeFixedUserHandle.razor new file mode 100644 index 0000000..bfc99a9 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/CustomizeFixedUserHandle.razor @@ -0,0 +1,77 @@ +@page "/CustomizeFixedUserHandle" + + +@using Syncfusion.Blazor.Diagram + + + + + @{ + if ((context as FixedUserHandle).ID == "user2" || (context as FixedUserHandle).ID == "user3") + { +
+ +
+ } + } + + + +@code +{ + //Defines diagram's connector collection + DiagramObjectCollection ConnectorCollection = new DiagramObjectCollection(); + //Defines diagram's node collection + DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() + { + NodeCollection = new DiagramObjectCollection(); + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // A fixed user handle is created and stored in fixed user handle collection of Node. + FixedUserHandles = new DiagramObjectCollection(){ + new NodeFixedUserHandle() + { + ID = "user2", + Height = 30, + Width = 30, + Visibility = true, + Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + Margin = new DiagramThickness() { Left = 30 }, Offset = new DiagramPoint() { X = 1 , Y = 0 }, + }, } + }; + NodeCollection.Add(node); + ConnectorCollection = new DiagramObjectCollection(); + Connector connector = new Connector() + { + SourcePoint = new DiagramPoint() { X = 300, Y = 40 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 160 }, + Type = ConnectorSegmentType.Orthogonal, + Style = new ShapeStyle() { StrokeColor = "#6495ED" }, + // A fixed user handle is created and stored in fixed user handle collection of Connector. + FixedUserHandles = new DiagramObjectCollection() + { + new ConnectorFixedUserHandle() { + ID="user3", + Offset = 1, + Alignment = FixedUserHandleAlignment.After, + Displacement = new DiagramPoint() { X = 10}, + Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + Width = 30, + Height = 30, + }, + } + }; + ConnectorCollection.Add(connector); + } + + private void OnChange() + { + NodeCollection[0].Style = new ShapeStyle() { Fill = "Green" }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/CustomizeUserHandle.razor b/Diagram/Server/Pages/UserHandle/CustomizeUserHandle.razor new file mode 100644 index 0000000..435aca0 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/CustomizeUserHandle.razor @@ -0,0 +1,74 @@ +@page "/CustomizeUserHandle" +@using Syncfusion.Blazor.Diagram + + + + + @{ + if ((context as UserHandle).Name == "user1") + { +
+ +
+ + } + } + + + + + @code + { + SfDiagramComponent Diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + // Defines diagram's SelectionSettings. + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + protected override void OnInitialized() + { + //Creating the userhandle for cloning the objects. + UserHandle cloneHandle = new UserHandle() + { + Name = "user1", + Visible = true, + Offset = 0, + Size = 30, + Side = Direction.Right, + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector + }; + //Add user handle to the collection. + UserHandles = new DiagramObjectCollection() + { + cloneHandle + }; + SelectedModel = new DiagramSelectionSettings() + { + //Enable userhandle for the selected model. + Constraints = SelectorConstraints.UserHandle, + UserHandles = this.UserHandles + }; + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node() + { + ID = "node1", + OffsetX = 300, + OffsetY = 200, + Width = 130, + Height = 130, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } + }; + nodes.Add(diagramNode); + + Connector connector1 = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 600, Y = 120 }, + TargetPoint = new DiagramPoint() { X = 750, Y = 270 }, + Type = ConnectorSegmentType.Orthogonal + }; + connectors.Add(connector1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/FixedUserHandleEvent.razor b/Diagram/Server/Pages/UserHandle/FixedUserHandleEvent.razor new file mode 100644 index 0000000..2b99033 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/FixedUserHandleEvent.razor @@ -0,0 +1,54 @@ +@page "/FixedUserHandleEvent" + + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Reference the diagram + SfDiagramComponent diagram; + //FixedHandle event + public void Changed(FixedUserHandleClickEventArgs args) + { + if ((args.Element as Node).ID == "node1" && args.FixedUserHandle.ID == "user1") + { + diagram.Copy(); + diagram.Paste(); + } + } + //Intialize diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + Node node1 = new Node() + { + OffsetX = 250, + OffsetY = 250, + ID = "node1", + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + // A fixed user handle is created and stored in fixed user handle collection of Node. + FixedUserHandles = new DiagramObjectCollection() + { + new NodeFixedUserHandle() + { + ID = "user1", + Height = 20, + Width = 20, + Visibility = true, + Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + Margin = new DiagramThickness() { Right = 20 }, + Offset = new DiagramPoint() { X = 0 , Y = 0 }, + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" + }, + } + }; + nodes.Add(node1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/FixedUserHandleIsSticky.razor b/Diagram/Server/Pages/UserHandle/FixedUserHandleIsSticky.razor new file mode 100644 index 0000000..8af3535 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/FixedUserHandleIsSticky.razor @@ -0,0 +1,38 @@ +@page "/FixedUserHandleIsSticky" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node1 = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + FixedUserHandles = new DiagramObjectCollection() + { + new NodeFixedUserHandle() + { + ID = "user1", + Height = 20, + Width = 20, + Visibility = true, + Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + Margin = new DiagramThickness() { Right = 20 }, Offset = new DiagramPoint() { X = 0 , Y = 0 }, + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Tooltip = new DiagramTooltip(){ Content = "CloneNode", IsSticky = true }, + }, + } + }; + nodes.Add(node1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/FixedUserHandleSample.razor b/Diagram/Server/Pages/UserHandle/FixedUserHandleSample.razor new file mode 100644 index 0000000..597751d --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/FixedUserHandleSample.razor @@ -0,0 +1,39 @@ +@page "/FixedUserHandle" + +@using Syncfusion.Blazor.Diagram + + + +@code +{ + // Defines diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node1 = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // A fixed user handle is created and stored in fixed user handle collection of Node. + FixedUserHandles = new DiagramObjectCollection() + { + new NodeFixedUserHandle() + { + ID = "user1", + Height = 20, + Width = 20, + Visibility = true, + Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + Margin = new DiagramThickness() { Right = 20 }, Offset = new DiagramPoint() { X = 0 , Y = 0 }, + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" + }, + } + }; + nodes.Add(node1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/FixedUserHandleTooltip.razor b/Diagram/Server/Pages/UserHandle/FixedUserHandleTooltip.razor new file mode 100644 index 0000000..967aafe --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/FixedUserHandleTooltip.razor @@ -0,0 +1,40 @@ +@page "/FixedUserHandleTooltip" +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Popups + + + +@code +{ + // Defines diagram's nodes collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + Node node1 = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // A fixed user handle is created and stored in fixed user handle collection of Node. + FixedUserHandles = new DiagramObjectCollection() + { + new NodeFixedUserHandle() + { + ID = "user1", + Height = 20, + Width = 20, + Visibility = true, + Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + Margin = new DiagramThickness() { Right = 20 }, Offset = new DiagramPoint() { X = 0 , Y = 0 }, + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Tooltip = new DiagramTooltip(){Content="CloneNode", Position=Position.BottomLeft} + }, + } + }; + nodes.Add(node1); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/InitializeFixedUserhandle.razor b/Diagram/Server/Pages/UserHandle/InitializeFixedUserhandle.razor new file mode 100644 index 0000000..196f3a9 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/InitializeFixedUserhandle.razor @@ -0,0 +1,47 @@ +@page "/InitializeFixedUserhandle" + +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + // Defines diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + //Creating the userhandle for cloning the objects + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // A fixed user handle is created and stored in fixed user handle collection of Node. + FixedUserHandles = new DiagramObjectCollection() + { + new NodeFixedUserHandle() + { + ID = "user1", + Height = 20, + Width = 20, + Visibility = true, + Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + Margin = new DiagramThickness() { Left = 20 }, + Offset = new DiagramPoint() { Y = 0 }, + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" + }, + } + }; + nodes.Add(diagramNode); + } +} diff --git a/Diagram/Server/Pages/UserHandle/InitializeUserHandle.razor b/Diagram/Server/Pages/UserHandle/InitializeUserHandle.razor new file mode 100644 index 0000000..5b2025e --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/InitializeUserHandle.razor @@ -0,0 +1,64 @@ +@page "/InitializeUserHandle" + + +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + // Defines diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + // Defines diagram's SelectedItems + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + protected override void OnInitialized() + { + //Creating the userhandle for cloning the objects + UserHandle cloneHandle = new UserHandle() + { + //Name of the user handle + Name = "clone", + //Set pathdata for userhandle + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + //Set visibility for the user handle + Visible = true, + //Set the position for the user handle + Offset = 0, + //Set side based on the given offset + Side = Direction.Bottom, + //set margin for the user handle + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 } + }; + //Add user handle to the collection... + UserHandles = new DiagramObjectCollection() + { + cloneHandle + }; + SelectedModel = new DiagramSelectionSettings() + { + //Enable userhandle for selected items... + Constraints = SelectorConstraints.UserHandle, + UserHandles = this.UserHandles + }; + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } + }; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/Offset.razor b/Diagram/Server/Pages/UserHandle/Offset.razor new file mode 100644 index 0000000..6a9719f --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/Offset.razor @@ -0,0 +1,46 @@ +@page "/Offset" + +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + // Defines diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + //Creating the userhandle for cloning the objects + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // A fixed user handle is created and stored in fixed user handle collection of Node. + FixedUserHandles = new DiagramObjectCollection() + { + new NodeFixedUserHandle() + { + ID = "user1", + Height = 20, + Width = 20, + Visibility = true, + Padding = new DiagramThickness() { Bottom = 1, Left = 1, Right = 1, Top = 1 }, + Margin = new DiagramThickness() { Left = 20 }, + Offset = new DiagramPoint() { Y = 0 }, + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z" + }, + } + }; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/Style.razor b/Diagram/Server/Pages/UserHandle/Style.razor new file mode 100644 index 0000000..1fee0b9 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/Style.razor @@ -0,0 +1,72 @@ +@page "/Style" + +@using Syncfusion.Blazor.Diagram + + + + + + + + +@code +{ + // Defines diagram's nodes collection. + DiagramObjectCollection nodes = new DiagramObjectCollection(); + // Defines diagram's SelectionSettings. + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + //Creating the userhandle for cloning the objects. + UserHandle cloneHandle = new UserHandle() + { + //Name of the user handle. + Name = "clone", + //Set path data for userhandle. + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + //Set visibility for the user handle. + Visible = true, + //Set the position for the user handle. + Offset = 1, + //Set side based on the given offset. + Side = Direction.Bottom, + //Set margin for the user handle. + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + //Set size of the user handle. + Size = 50, + //Set path color for given path data. + PathColor = "yellow", + //Set Border color of the user handle. + BorderColor = "red", + //Set Background Color of the user handle. + BackgroundColor = "green", + //Set Border Width Color of the user handle. + BorderWidth = 3, + }; + //Add user handle to the collection. + UserHandles = new DiagramObjectCollection() + { + cloneHandle + }; + SelectedModel = new DiagramSelectionSettings() + { + //Enable userhandle for selected model. + Constraints = SelectorConstraints.UserHandle, + UserHandles = this.UserHandles + }; + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } + }; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/UserHandleAlignment.razor b/Diagram/Server/Pages/UserHandle/UserHandleAlignment.razor new file mode 100644 index 0000000..c34042a --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/UserHandleAlignment.razor @@ -0,0 +1,76 @@ +@page "/UserHandleAlignment" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Initialize diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + // Defines diagram's SelectionSettings. + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + + + + protected override void OnInitialized() + { + CreateUserHandle(); + CreateSelectionSettings(); + CreateNode(); + } + + private void CreateUserHandle() + { + //Creating the userhandle for cloning the objects. + UserHandle cloneHandle = new UserHandle() + { + //Name of the user handle. + Name = "clone", + //Set path data for userhandle. + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + //Set visibility for the user handle. + Visible = true, + //Set the position for the user handle. + //Set horizontal alignment for the user handle. + HorizontalAlignment = HorizontalAlignment.Left, + //Set vertical alignment for the user handle. + VerticalAlignment = VerticalAlignment.Top, + //Set margin for the user handle. + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + //Set target of the userhandle + VisibleTarget = VisibleTarget.Node, + }; + //Add user handle to the collection. + UserHandles = new DiagramObjectCollection() + { + cloneHandle + }; + } + + private void CreateSelectionSettings() + { + SelectedModel = new DiagramSelectionSettings() + { + //Enable userhandle for selected model. + Constraints = SelectorConstraints.All, + UserHandles = this.UserHandles, + }; + } + + private void CreateNode() + { + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + nodes.Add(node); + } + +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/UserHandleClickEvents.razor b/Diagram/Server/Pages/UserHandle/UserHandleClickEvents.razor new file mode 100644 index 0000000..374212d --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/UserHandleClickEvents.razor @@ -0,0 +1,119 @@ +@page "/UserHandleClickEvents" + +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Diagram + +
+ + + +
+ +@code +{ + public SfDiagramComponent Diagram; + public DiagramObjectCollection nodes { get; set; } + public DiagramObjectCollection connectors { get; set; } + // Defines diagram's SelectionSettings. + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + nodes = new DiagramObjectCollection(); + connectors = new DiagramObjectCollection(); + InitDiagramModel(); + } + + public InteractionControllerBase GetCustomTool(DiagramElementAction action, string id) + { + return id == "clone" ? new CloneTool(Diagram) : new DeleteTool(Diagram); + } + + public class DeleteTool : InteractionControllerBase + { + SfDiagramComponent diagram; + public DeleteTool(SfDiagramComponent diagram) : base(diagram) { this.diagram = diagram; } + public override void OnMouseUp(DiagramMouseEventArgs args) + { + diagram.Delete(); + base.OnMouseUp(args); + } + } + + public class CloneTool : DragController + { + SfDiagramComponent diagram; + public CloneTool(SfDiagramComponent diagram) : base(diagram) { this.diagram = diagram; } + public override void OnMouseDown(DiagramMouseEventArgs args) + { + diagram.Copy(); + diagram.Paste(); + base.OnMouseDown(args); + } + } + + private void InitDiagramModel() + { + var node = new Node() + { + ID = "Node1", + OffsetX = 300, + OffsetY = 200, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() { Content = "Node" } + } + }; + nodes.Add(node); + + var connector = new Connector() + { + ID = "Connector1", + SourcePoint = new DiagramPoint() { X = 500, Y = 150 }, + TargetPoint = new DiagramPoint() { X = 600, Y = 250 }, + Type = ConnectorSegmentType.Orthogonal, + Annotations = new DiagramObjectCollection() + { + new PathAnnotation(){ Content = "Connector" } + } + }; + connectors.Add(connector); + var cloneHandle = new UserHandle() + { + Name = "clone", + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Offset = 0, + Side = Direction.Right, + Visible = true, + VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector + }; + var deleteHandle = new UserHandle() + { + Name = "delete", + PathData = "M0.54700077,2.2130003 L7.2129992,2.2130003 7.2129992,8.8800011 C7.2129992,9.1920013 7.1049975,9.4570007 6.8879985,9.6739998 6.6709994,9.8910007 6.406,10 6.0939997,10 L1.6659999,10 C1.3539997,10 1.0890004,9.8910007 0.87200136,9.6739998 0.65500242,9.4570007 0.54700071,9.1920013 0.54700077,8.8800011 z M2.4999992,0 L5.2600006,0 5.8329986,0.54600048 7.7599996,0.54600048 7.7599996,1.6660004 0,1.6660004 0,0.54600048 1.9270014,0.54600048 z", + Offset = 1, + Side = Direction.Bottom, + VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector, + Visible = true + }; + UserHandles = new DiagramObjectCollection() + { + cloneHandle, deleteHandle + }; + SelectedModel = new DiagramSelectionSettings() + { + //Enable userhandle for selected model. + Constraints = SelectorConstraints.UserHandle, + + UserHandles = this.UserHandles + }; + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/UserHandleDisplacement.razor b/Diagram/Server/Pages/UserHandle/UserHandleDisplacement.razor new file mode 100644 index 0000000..a2ec216 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/UserHandleDisplacement.razor @@ -0,0 +1,58 @@ +@page "/UserHandleDisplacement" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + //Intialize diagram's connectors collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + // Defines diagram's SelectionSettings. + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + protected override void OnInitialized() + { + //Creating the userhandle for cloning the objects. + UserHandle cloneHandle = new UserHandle() + { + //Name of the user handle. + Name = "clone", + //Set path data for userhandle. + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + //Set visibility for the user handle. + Visible = true, + //Set the position for the user handle. + Offset = 0, + //Set side based on the given offset. + Side = Direction.Bottom, + //Set displacement of the userhandle + Displacement = 50, + //Set margin for the user handle. + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + //Set target of the userhandle + VisibleTarget = VisibleTarget.Connector, + }; + //Add user handle to the collection. + UserHandles = new DiagramObjectCollection() + { + cloneHandle + }; + SelectedModel = new DiagramSelectionSettings() + { + //Enable userhandle for selected model. + Constraints = SelectorConstraints.All, + UserHandles = this.UserHandles, + + }; + Connector connector = new Connector() + { + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + Type = ConnectorSegmentType.Orthogonal, + Style = new ShapeStyle() { StrokeColor = "#6495ED" }, + }; + connectors.Add(connector); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/UserHandleImageType.razor b/Diagram/Server/Pages/UserHandle/UserHandleImageType.razor new file mode 100644 index 0000000..f777ebc --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/UserHandleImageType.razor @@ -0,0 +1,58 @@ +@page "/UserHandleImageType" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + SfDiagramComponent diagram; + //Initialize diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + // Defines diagram's SelectionSettings. + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + //Creating the userhandle for cloning the objects. + UserHandle ImageHandle = new UserHandle() + { + //Name of the user handle. + Name = "clone", + ImageUrl = "https://www.w3schools.com/images/w3schools_green.jpg", + //Set visibility for the user handle. + Visible = true, + //Set the position for the user handle. + Offset = 1, + //Set the side for the user handle. + Side = Direction.Left, + //Set target of the userhandle + VisibleTarget = VisibleTarget.Node, + }; + //Add user handle to the collection. + UserHandles = new DiagramObjectCollection() + { + ImageHandle + }; + SelectedModel = new DiagramSelectionSettings() + { + //Enable userhandle for selected model. + Constraints = SelectorConstraints.All, + UserHandles = this.UserHandles, + }; + + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + nodes.Add(node); + } +} + diff --git a/Diagram/Server/Pages/UserHandle/UserHandleIsSticky.razor b/Diagram/Server/Pages/UserHandle/UserHandleIsSticky.razor new file mode 100644 index 0000000..83797cc --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/UserHandleIsSticky.razor @@ -0,0 +1,45 @@ +@page "/UserHandleIsSticky" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + protected override void OnInitialized() + { + UserHandle cloneHandle = new UserHandle() + { + Name = "clone", + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Visible = true, + Offset = 0, + Side = Direction.Right, + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Tooltip = new DiagramTooltip() { Content = "CloneNode", IsSticky = true } + }; + UserHandles = new DiagramObjectCollection() + { + cloneHandle + }; + SelectedModel.UserHandles = UserHandles; + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } + }; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/UserHandleMargin.razor b/Diagram/Server/Pages/UserHandle/UserHandleMargin.razor new file mode 100644 index 0000000..be823e4 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/UserHandleMargin.razor @@ -0,0 +1,66 @@ +@page "/UserHandleMargin" + +@using Syncfusion.Blazor.Diagram +@using Syncfusion.Blazor.Buttons + + + + + + +@code +{ + SfDiagramComponent diagram; + //Initialize diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + // Defines diagram's SelectionSettings. + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + //Creating the userhandle for cloning the objects. + UserHandle cloneHandle = new UserHandle() + { + //Name of the user handle. + Name = "clone", + //Set path data for userhandle. + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + //Set visibility for the user handle. + Visible = true, + //Set the position for the user handle. + Offset = 1, + //Set the side for the user handle. + Side = Direction.Left, + //Set target of the userhandle + VisibleTarget = VisibleTarget.Node, + }; + //Add user handle to the collection. + UserHandles = new DiagramObjectCollection() + { + cloneHandle + }; + SelectedModel = new DiagramSelectionSettings() + { + //Enable userhandle for selected model. + Constraints = SelectorConstraints.All, + UserHandles = this.UserHandles, + }; + + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + nodes.Add(node); + } + + private void ChangeMargin() + { + diagram.SelectionSettings.UserHandles[0].Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }; + } +} + diff --git a/Diagram/Server/Pages/UserHandle/UserHandlePathType.razor b/Diagram/Server/Pages/UserHandle/UserHandlePathType.razor new file mode 100644 index 0000000..296ae88 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/UserHandlePathType.razor @@ -0,0 +1,59 @@ +@page "/UserHandlePathType" + +@using Syncfusion.Blazor.Diagram + + + + + +@code +{ + SfDiagramComponent diagram; + //Initialize diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + // Defines diagram's SelectionSettings. + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + + protected override void OnInitialized() + { + //Creating the userhandle for cloning the objects. + UserHandle PathHandle = new UserHandle() + { + //Name of the user handle. + Name = "clone", + //Set path data for userhandle. + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + //Set visibility for the user handle. + Visible = true, + //Set the position for the user handle. + Offset = 1, + //Set the side for the user handle. + Side = Direction.Left, + //Set target of the userhandle + VisibleTarget = VisibleTarget.Node, + }; + //Add user handle to the collection. + UserHandles = new DiagramObjectCollection() + { + PathHandle + }; + SelectedModel = new DiagramSelectionSettings() + { + //Enable userhandle for selected model. + Constraints = SelectorConstraints.All, + UserHandles = this.UserHandles, + }; + + Node node = new Node() + { + Width = 100, + Height = 100, + OffsetX = 100, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + nodes.Add(node); + } +} + diff --git a/Diagram/Server/Pages/UserHandle/UserhandleTooltip.razor b/Diagram/Server/Pages/UserHandle/UserhandleTooltip.razor new file mode 100644 index 0000000..0b8a684 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/UserhandleTooltip.razor @@ -0,0 +1,45 @@ +@page "/UserhandleTooltip" + +@using Syncfusion.Blazor.Diagram + + + + +@code +{ + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + protected override void OnInitialized() + { + UserHandle cloneHandle = new UserHandle() + { + Name = "clone", + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Visible = true, + Offset = 0, + Side = Direction.Right, + Margin = new DiagramThickness() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Tooltip = new DiagramTooltip() { Content = "CloneNode"} + }; + UserHandles = new DiagramObjectCollection() + { + cloneHandle + }; + SelectedModel.UserHandles = UserHandles; + nodes = new DiagramObjectCollection(); + Node diagramNode = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "none" }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } + }; + nodes.Add(diagramNode); + } +} \ No newline at end of file diff --git a/Diagram/Server/Pages/UserHandle/VisibleofUserhandle.razor b/Diagram/Server/Pages/UserHandle/VisibleofUserhandle.razor new file mode 100644 index 0000000..facfcd6 --- /dev/null +++ b/Diagram/Server/Pages/UserHandle/VisibleofUserhandle.razor @@ -0,0 +1,227 @@ +@page "/VisibleofUserhandle" + +@using Syncfusion.Blazor.Diagram +@using System.Collections.ObjectModel +@using Syncfusion.Blazor.Buttons + + + + + + + + +@code +{ + //Reference the diagram + public SfDiagramComponent Diagram; + //Intialize diagram's nodes collection + DiagramObjectCollection nodes = new DiagramObjectCollection(); + NodeGroup groupNode = new NodeGroup(); + //Intialize diagram's nodes collection + DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Intialize diagram's selectionsettings + DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + //Intialize diagram's userhandle + DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + public string cursor(DiagramElementAction action, bool active, string handle) + { + string cursors = null; + if (handle == "changeCursor") + { + cursors = "crosshair"; + } + return cursors; + } + public InteractionControllerBase tools(DiagramElementAction action, string id) + { + InteractionControllerBase tool = null; + if (id == "clone") + { + tool = new CloneTool(Diagram); + } + else if (id == "nodeDelete") + { + tool = new AddDeleteTool(Diagram); + } + return tool; + } + public class AddDeleteTool : DragController + { + SfDiagramComponent sfDiagram; + public AddDeleteTool(SfDiagramComponent Diagram) : base(Diagram) + { + sfDiagram = Diagram; + } + public override void OnMouseUp(DiagramMouseEventArgs args) + { + bool GroupAction = false; + sfDiagram.BeginUpdate(); + if (sfDiagram.SelectionSettings.Nodes.Count > 1 || sfDiagram.SelectionSettings.Connectors.Count > 1 || + ((sfDiagram.SelectionSettings.Nodes.Count + sfDiagram.SelectionSettings.Connectors.Count) > 1)) + { + GroupAction = true; + } + if (GroupAction) + { + sfDiagram.StartGroupAction(); + } + if (sfDiagram.SelectionSettings.Nodes.Count != 0) + { + for (var i = sfDiagram.SelectionSettings.Nodes.Count - 1; i >= 0; i--) + { + Node deleteNode = sfDiagram.SelectionSettings.Nodes[i]; + sfDiagram.Nodes.Remove(deleteNode); + } + } + if (sfDiagram.SelectionSettings.Connectors.Count != 0) + { + for (var i = sfDiagram.SelectionSettings.Connectors.Count - 1; i >= 0; i--) + { + Connector deleteConnector = sfDiagram.SelectionSettings.Connectors[i]; + sfDiagram.Connectors.Remove(deleteConnector); + } + } + if (GroupAction) + { + sfDiagram.EndGroupAction(); + } + _ = sfDiagram.EndUpdateAsync(); + base.OnMouseUp(args); + this.InAction = true; + } + } + public class CloneTool : DragController + { + SfDiagramComponent sfDiagram; + public CloneTool(SfDiagramComponent Diagram) : base(Diagram) + { + sfDiagram = Diagram; + } + public override void OnMouseDown(DiagramMouseEventArgs args) + { + NodeBase newObject; + if (sfDiagram.SelectionSettings.Nodes.Count > 0) + { + newObject = (sfDiagram.SelectionSettings.Nodes[0]).Clone() as Node; + } + else + { + newObject = (sfDiagram.SelectionSettings.Connectors[0]).Clone() as Connector; + } + newObject.ID += sfDiagram.Nodes.Count.ToString(); + sfDiagram.Copy(); + sfDiagram.Paste(); + ObservableCollection obj = new ObservableCollection() { sfDiagram.Nodes[sfDiagram.Nodes.Count - 1] as IDiagramObject }; + sfDiagram.Select(obj); + base.OnMouseDown(args); + this.InAction = true; + } + } + protected override void OnInitialized() + { + UserHandle cloneHandle = new UserHandle() + { + Name = "clone", + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Offset = 0, + Visible = true, + Side = Direction.Top, + Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Size = 30, + PathColor = "yellow", + BorderColor = "red", + BackgroundColor = "green", + BorderWidth = 3, + }; + UserHandle nodeDelete = new UserHandle() + { + Name = "nodeDelete", + PathData = "M 33.986328 15 A 1.0001 1.0001 0 0 0 33 16 L 33 71.613281 A 1.0001 1.0001 0 0 0 34.568359 72.435547 L 47.451172 63.53125 L 56.355469 85.328125 A 1.0001 1.0001 0 0 0 57.667969 85.871094 L 66.191406 82.298828 A 1.0001 1.0001 0 0 0 66.730469 80.998047 L 57.814453 59.171875 L 73.195312 56.115234 A 1.0001 1.0001 0 0 0 73.708984 54.429688 L 34.708984 15.294922 A 1.0001 1.0001 0 0 0 33.986328 15 z M 35 18.419922 L 70.972656 54.517578 L 56.234375 57.447266 A 1.0001 1.0001 0 0 0 55.503906 58.806641 L 64.503906 80.835938 L 57.826172 83.636719 L 48.832031 61.623047 A 1.0001 1.0001 0 0 0 47.337891 61.177734 L 35 69.707031 L 35 18.419922 z M 37.494141 23.970703 A 0.50005 0.50005 0 0 0 37 24.470703 L 37 58.5 A 0.50005 0.50005 0 1 0 38 58.5 L 38 25.679688 L 51.123047 38.849609 A 0.50005 0.50005 0 1 0 51.832031 38.144531 L 37.853516 24.117188 A 0.50005 0.50005 0 0 0 37.494141 23.970703 z M 53.496094 40.021484 A 0.50005 0.50005 0 0 0 53.146484 40.878906 L 64.898438 52.671875 L 61.359375 53.373047 A 0.50005 0.50005 0 1 0 61.552734 54.353516 L 66.007812 53.470703 A 0.50005 0.50005 0 0 0 66.263672 52.626953 L 53.853516 40.173828 A 0.50005 0.50005 0 0 0 53.496094 40.021484 z M 58.521484 53.941406 A 0.50005 0.50005 0 0 0 58.4375 53.951172 L 51.482422 55.330078 A 0.50005 0.50005 0 0 0 51.117188 56.009766 L 51.794922 57.666016 A 0.50016022 0.50016022 0 1 0 52.720703 57.287109 L 52.273438 56.193359 L 58.632812 54.931641 A 0.50005 0.50005 0 0 0 58.521484 53.941406 z M 53.089844 59.017578 A 0.50005 0.50005 0 0 0 52.630859 59.714844 L 53.037109 60.708984 A 0.50005 0.50005 0 1 0 53.962891 60.332031 L 53.556641 59.335938 A 0.50005 0.50005 0 0 0 53.089844 59.017578 z M 54.300781 61.984375 A 0.50005 0.50005 0 0 0 53.841797 62.679688 L 60.787109 79.679688 A 0.50016068 0.50016068 0 0 0 61.712891 79.300781 L 54.767578 62.302734 A 0.50005 0.50005 0 0 0 54.300781 61.984375 z", + Offset = 1, + Visible = true, + Side = Direction.Left, + Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Size = 30, + PathColor = "yellow", + BorderColor = "red", + BackgroundColor = "green", + BorderWidth = 3, + }; + UserHandle changeCursor = new UserHandle() + { + Name = "changeCursor", + Offset = 0.5, + ImageUrl = "https://www.w3schools.com/images/w3schools_green.jpg", + Visible = true, + Side = Direction.Bottom, + Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Size = 30, + PathColor = "yellow", + BorderColor = "red", + BackgroundColor = "green", + BorderWidth = 3, + }; + UserHandles = new DiagramObjectCollection() + { + cloneHandle,nodeDelete,changeCursor + }; + SelectedModel.UserHandles = UserHandles; + nodes = new DiagramObjectCollection(); + Node DiagramNode = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } + }; + connectors = new DiagramObjectCollection(); + Connector Connector1 = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 250, Y = 250 }, + TargetPoint = new DiagramPoint() { X = 350, Y = 350 }, + Annotations = new DiagramObjectCollection() + { + new PathAnnotation() + { + ID = "connector1", + Offset = 0, + Visibility = true, + Style = new TextStyle(){ Color ="red", FontSize =12, TextAlign = TextAlign.Right, + }, + } + }, + Type = ConnectorSegmentType.Bezier + }; + nodes.Add(DiagramNode); + connectors.Add(Connector1); + } + //Method to sepcifies the userhandle is visible for node + public void VisibilityNode() + { + foreach (UserHandle userHandle in UserHandles) + { + userHandle.VisibleTarget = VisibleTarget.Node; + } + } + //Method to sepcifies the userhandle is visible for connector + public void VisibilityConnector() + { + foreach (UserHandle userHandle in UserHandles) + { + userHandle.VisibleTarget = VisibleTarget.Connector; + } + } + //Method to sepcifies the userhandle is visible for connector and node + public void VisibilityBoth() + { + foreach (UserHandle userHandle in UserHandles) + { + userHandle.VisibleTarget = VisibleTarget.Node | VisibleTarget.Connector; + } + } +} diff --git a/Diagram/Server/Pages/_Layout.cshtml b/Diagram/Server/Pages/_Layout.cshtml index ef8978a..943845b 100644 --- a/Diagram/Server/Pages/_Layout.cshtml +++ b/Diagram/Server/Pages/_Layout.cshtml @@ -1,5 +1,5 @@ @using Microsoft.AspNetCore.Components.Web -@namespace AlignBottom.Pages +@namespace Server.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers diff --git a/Diagram/Server/Server_NET8.csproj b/Diagram/Server/Server_NET8.csproj deleted file mode 100644 index 07f3a73..0000000 --- a/Diagram/Server/Server_NET8.csproj +++ /dev/null @@ -1,15 +0,0 @@ - - - - net8.0 - enable - enable - - - - - - - - - \ No newline at end of file diff --git a/Diagram/Server/Shared/MainLayout.razor b/Diagram/Server/Shared/MainLayout.razor index 67ac245..cfe048a 100644 --- a/Diagram/Server/Shared/MainLayout.razor +++ b/Diagram/Server/Shared/MainLayout.razor @@ -1,15 +1,10 @@ -@namespace AlignBottom.Shared +@namespace Server.Shared @inherits LayoutComponentBase -AlignBottom +Server
-
-
- -
-
@Body
diff --git a/Diagram/Server/_Imports.razor b/Diagram/Server/_Imports.razor index 5a117c2..d8e3847 100644 --- a/Diagram/Server/_Imports.razor +++ b/Diagram/Server/_Imports.razor @@ -6,5 +6,5 @@ @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop -@using AlignBottom -@using AlignBottom.Shared +@using Server +@using Server.Shared diff --git a/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css b/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css deleted file mode 100644 index 02ae65b..0000000 --- a/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css +++ /dev/null @@ -1,7 +0,0 @@ -@charset "UTF-8";/*! - * Bootstrap v5.1.0 (https://getbootstrap.com/) - * Copyright 2011-2021 The Bootstrap Authors - * Copyright 2011-2021 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-rgb:33,37,41;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:calc(1.625rem + 4.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-1{font-size:5rem}}.display-2{font-size:calc(1.575rem + 3.9vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-2{font-size:4.5rem}}.display-3{font-size:calc(1.525rem + 3.3vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-3{font-size:4rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.display-5{font-size:calc(1.425rem + 2.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-5{font-size:3rem}}.display-6{font-size:calc(1.375rem + 1.5vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-6{font-size:2.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:.875em;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.blockquote-footer{margin-top:-1rem;margin-bottom:1rem;font-size:.875em;color:#6c757d}.blockquote-footer::before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:.875em;color:#6c757d}.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container,.container-sm{max-width:540px}}@media (min-width:768px){.container,.container-md,.container-sm{max-width:720px}}@media (min-width:992px){.container,.container-lg,.container-md,.container-sm{max-width:960px}}@media (min-width:1200px){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:1140px}}@media (min-width:1400px){.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x) * -.5);margin-left:calc(var(--bs-gutter-x) * -.5)}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width:576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width:768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width:992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width:1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width:1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}.table{--bs-table-bg:transparent;--bs-table-accent-bg:transparent;--bs-table-striped-color:#212529;--bs-table-striped-bg:rgba(0, 0, 0, 0.05);--bs-table-active-color:#212529;--bs-table-active-bg:rgba(0, 0, 0, 0.1);--bs-table-hover-color:#212529;--bs-table-hover-bg:rgba(0, 0, 0, 0.075);width:100%;margin-bottom:1rem;color:#212529;vertical-align:top;border-color:#dee2e6}.table>:not(caption)>*>*{padding:.5rem .5rem;background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:last-child)>:last-child>*{border-bottom-color:currentColor}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:1px 0}.table-bordered>:not(caption)>*>*{border-width:0 1px}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-striped>tbody>tr:nth-of-type(odd){--bs-table-accent-bg:var(--bs-table-striped-bg);color:var(--bs-table-striped-color)}.table-active{--bs-table-accent-bg:var(--bs-table-active-bg);color:var(--bs-table-active-color)}.table-hover>tbody>tr:hover{--bs-table-accent-bg:var(--bs-table-hover-bg);color:var(--bs-table-hover-color)}.table-primary{--bs-table-bg:#cfe2ff;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000;color:#000;border-color:#bacbe6}.table-secondary{--bs-table-bg:#e2e3e5;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000;color:#000;border-color:#cbccce}.table-success{--bs-table-bg:#d1e7dd;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000;color:#000;border-color:#bcd0c7}.table-info{--bs-table-bg:#cff4fc;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000;color:#000;border-color:#badce3}.table-warning{--bs-table-bg:#fff3cd;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000;color:#000;border-color:#e6dbb9}.table-danger{--bs-table-bg:#f8d7da;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000;color:#000;border-color:#dfc2c4}.table-light{--bs-table-bg:#f8f9fa;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000;color:#000;border-color:#dfe0e1}.table-dark{--bs-table-bg:#212529;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff;color:#fff;border-color:#373b3e}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media (max-width:575.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:767.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:991.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1199.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media (max-width:1399.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.form-label{margin-bottom:.5rem}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem + 1px);font-size:.875rem}.form-text{margin-top:.25rem;font-size:.875em;color:#6c757d}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not([readonly]){cursor:pointer}.form-control:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-control::-webkit-date-and-time-value{height:1.5em}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}.form-control::file-selector-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:#dde0e3}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-.375rem -.75rem;-webkit-margin-end:.75rem;margin-inline-end:.75rem;color:#212529;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}}.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button{background-color:#dde0e3}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.5;color:#212529;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.5em + .5rem + 2px);padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-.25rem -.5rem;-webkit-margin-end:.5rem;margin-inline-end:.5rem}.form-control-lg{min-height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.form-control-lg::file-selector-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.form-control-lg::-webkit-file-upload-button{padding:.5rem 1rem;margin:-.5rem -1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}textarea.form-control{min-height:calc(1.5em + .75rem + 2px)}textarea.form-control-sm{min-height:calc(1.5em + .5rem + 2px)}textarea.form-control-lg{min-height:calc(1.5em + 1rem + 2px)}.form-control-color{width:3rem;height:auto;padding:.375rem}.form-control-color:not(:disabled):not([readonly]){cursor:pointer}.form-control-color::-moz-color-swatch{height:1.5em;border-radius:.25rem}.form-control-color::-webkit-color-swatch{height:1.5em;border-radius:.25rem}.form-select{display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;-moz-padding-start:calc(0.75rem - 3px);font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-select{transition:none}}.form-select:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}.form-select:disabled{background-color:#e9ecef}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #212529}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:.875rem}.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-input{width:1em;height:1em;margin-top:.25em;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgba(0,0,0,.25);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.form-check-input:checked{background-color:#0d6efd;border-color:#0d6efd}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{width:2em;margin-left:-2.5em;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.form-check-inline{display:inline-block;margin-right:1rem}.btn-check{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn-check:disabled+.btn,.btn-check[disabled]+.btn{pointer-events:none;filter:none;opacity:.65}.form-range{width:100%;height:1.5rem;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.25rem;background-color:#0d6efd;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#b6d4fe}.form-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#0d6efd;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#b6d4fe}.form-range::-moz-range-track{width:100%;height:.5rem;color:transparent;cursor:pointer;background-color:#dee2e6;border-color:transparent;border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#adb5bd}.form-range:disabled::-moz-range-thumb{background-color:#adb5bd}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-select{height:calc(3.5rem + 2px);line-height:1.25}.form-floating>label{position:absolute;top:0;left:0;height:100%;padding:1rem .75rem;pointer-events:none;border:1px solid transparent;transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media (prefers-reduced-motion:reduce){.form-floating>label{transition:none}}.form-floating>.form-control{padding:1rem .75rem}.form-floating>.form-control::-moz-placeholder{color:transparent}.form-floating>.form-control::placeholder{color:transparent}.form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:not(:-moz-placeholder-shown)~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.form-control:-webkit-autofill~label{opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-select:focus{z-index:3}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:3}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:.25rem}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4),.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#198754}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:rgba(25,135,84,.9);border-radius:.25rem}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#198754;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:#198754}.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"],.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"]{padding-right:4.125rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:#198754}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:#198754}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#198754}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.input-group .form-control.is-valid,.input-group .form-select.is-valid,.was-validated .input-group .form-control:valid,.was-validated .input-group .form-select:valid{z-index:1}.input-group .form-control.is-valid:focus,.input-group .form-select.is-valid:focus,.was-validated .input-group .form-control:valid:focus,.was-validated .input-group .form-select:valid:focus{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;color:#fff;background-color:rgba(220,53,69,.9);border-radius:.25rem}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#dc3545;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:#dc3545}.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"],.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"]{padding-right:4.125rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(.75em + .375rem) calc(.75em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#dc3545}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:#dc3545}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#dc3545}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.input-group .form-control.is-invalid,.input-group .form-select.is-invalid,.was-validated .input-group .form-control:invalid,.was-validated .input-group .form-select:invalid{z-index:2}.input-group .form-control.is-invalid:focus,.input-group .form-select.is-invalid:focus,.was-validated .input-group .form-control:invalid:focus,.was-validated .input-group .form-select:invalid:focus{z-index:3}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#212529}.btn-check:focus+.btn,.btn:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.btn-primary{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-primary:hover{color:#fff;background-color:#0b5ed7;border-color:#0a58ca}.btn-check:focus+.btn-primary,.btn-primary:focus{color:#fff;background-color:#0b5ed7;border-color:#0a58ca;box-shadow:0 0 0 .25rem rgba(49,132,253,.5)}.btn-check:active+.btn-primary,.btn-check:checked+.btn-primary,.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0a58ca;border-color:#0a53be}.btn-check:active+.btn-primary:focus,.btn-check:checked+.btn-primary:focus,.btn-primary.active:focus,.btn-primary:active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(49,132,253,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-secondary{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#5c636a;border-color:#565e64}.btn-check:focus+.btn-secondary,.btn-secondary:focus{color:#fff;background-color:#5c636a;border-color:#565e64;box-shadow:0 0 0 .25rem rgba(130,138,145,.5)}.btn-check:active+.btn-secondary,.btn-check:checked+.btn-secondary,.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#565e64;border-color:#51585e}.btn-check:active+.btn-secondary:focus,.btn-check:checked+.btn-secondary:focus,.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(130,138,145,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-success{color:#fff;background-color:#198754;border-color:#198754}.btn-success:hover{color:#fff;background-color:#157347;border-color:#146c43}.btn-check:focus+.btn-success,.btn-success:focus{color:#fff;background-color:#157347;border-color:#146c43;box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.btn-check:active+.btn-success,.btn-check:checked+.btn-success,.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#146c43;border-color:#13653f}.btn-check:active+.btn-success:focus,.btn-check:checked+.btn-success:focus,.btn-success.active:focus,.btn-success:active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#198754;border-color:#198754}.btn-info{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-info:hover{color:#000;background-color:#31d2f2;border-color:#25cff2}.btn-check:focus+.btn-info,.btn-info:focus{color:#000;background-color:#31d2f2;border-color:#25cff2;box-shadow:0 0 0 .25rem rgba(11,172,204,.5)}.btn-check:active+.btn-info,.btn-check:checked+.btn-info,.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{color:#000;background-color:#3dd5f3;border-color:#25cff2}.btn-check:active+.btn-info:focus,.btn-check:checked+.btn-info:focus,.btn-info.active:focus,.btn-info:active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(11,172,204,.5)}.btn-info.disabled,.btn-info:disabled{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-warning{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#000;background-color:#ffca2c;border-color:#ffc720}.btn-check:focus+.btn-warning,.btn-warning:focus{color:#000;background-color:#ffca2c;border-color:#ffc720;box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-check:active+.btn-warning,.btn-check:checked+.btn-warning,.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:#000;background-color:#ffcd39;border-color:#ffc720}.btn-check:active+.btn-warning:focus,.btn-check:checked+.btn-warning:focus,.btn-warning.active:focus,.btn-warning:active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#bb2d3b;border-color:#b02a37}.btn-check:focus+.btn-danger,.btn-danger:focus{color:#fff;background-color:#bb2d3b;border-color:#b02a37;box-shadow:0 0 0 .25rem rgba(225,83,97,.5)}.btn-check:active+.btn-danger,.btn-check:checked+.btn-danger,.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#b02a37;border-color:#a52834}.btn-check:active+.btn-danger:focus,.btn-check:checked+.btn-danger:focus,.btn-danger.active:focus,.btn-danger:active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(225,83,97,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-light{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#000;background-color:#f9fafb;border-color:#f9fafb}.btn-check:focus+.btn-light,.btn-light:focus{color:#000;background-color:#f9fafb;border-color:#f9fafb;box-shadow:0 0 0 .25rem rgba(211,212,213,.5)}.btn-check:active+.btn-light,.btn-check:checked+.btn-light,.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{color:#000;background-color:#f9fafb;border-color:#f9fafb}.btn-check:active+.btn-light:focus,.btn-check:checked+.btn-light:focus,.btn-light.active:focus,.btn-light:active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(211,212,213,.5)}.btn-light.disabled,.btn-light:disabled{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-dark{color:#fff;background-color:#212529;border-color:#212529}.btn-dark:hover{color:#fff;background-color:#1c1f23;border-color:#1a1e21}.btn-check:focus+.btn-dark,.btn-dark:focus{color:#fff;background-color:#1c1f23;border-color:#1a1e21;box-shadow:0 0 0 .25rem rgba(66,70,73,.5)}.btn-check:active+.btn-dark,.btn-check:checked+.btn-dark,.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1a1e21;border-color:#191c1f}.btn-check:active+.btn-dark:focus,.btn-check:checked+.btn-dark:focus,.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(66,70,73,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#212529;border-color:#212529}.btn-outline-primary{color:#0d6efd;border-color:#0d6efd}.btn-outline-primary:hover{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-check:focus+.btn-outline-primary,.btn-outline-primary:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.5)}.btn-check:active+.btn-outline-primary,.btn-check:checked+.btn-outline-primary,.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show,.btn-outline-primary:active{color:#fff;background-color:#0d6efd;border-color:#0d6efd}.btn-check:active+.btn-outline-primary:focus,.btn-check:checked+.btn-outline-primary:focus,.btn-outline-primary.active:focus,.btn-outline-primary.dropdown-toggle.show:focus,.btn-outline-primary:active:focus{box-shadow:0 0 0 .25rem rgba(13,110,253,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#0d6efd;background-color:transparent}.btn-outline-secondary{color:#6c757d;border-color:#6c757d}.btn-outline-secondary:hover{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-check:focus+.btn-outline-secondary,.btn-outline-secondary:focus{box-shadow:0 0 0 .25rem rgba(108,117,125,.5)}.btn-check:active+.btn-outline-secondary,.btn-check:checked+.btn-outline-secondary,.btn-outline-secondary.active,.btn-outline-secondary.dropdown-toggle.show,.btn-outline-secondary:active{color:#fff;background-color:#6c757d;border-color:#6c757d}.btn-check:active+.btn-outline-secondary:focus,.btn-check:checked+.btn-outline-secondary:focus,.btn-outline-secondary.active:focus,.btn-outline-secondary.dropdown-toggle.show:focus,.btn-outline-secondary:active:focus{box-shadow:0 0 0 .25rem rgba(108,117,125,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6c757d;background-color:transparent}.btn-outline-success{color:#198754;border-color:#198754}.btn-outline-success:hover{color:#fff;background-color:#198754;border-color:#198754}.btn-check:focus+.btn-outline-success,.btn-outline-success:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.5)}.btn-check:active+.btn-outline-success,.btn-check:checked+.btn-outline-success,.btn-outline-success.active,.btn-outline-success.dropdown-toggle.show,.btn-outline-success:active{color:#fff;background-color:#198754;border-color:#198754}.btn-check:active+.btn-outline-success:focus,.btn-check:checked+.btn-outline-success:focus,.btn-outline-success.active:focus,.btn-outline-success.dropdown-toggle.show:focus,.btn-outline-success:active:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#198754;background-color:transparent}.btn-outline-info{color:#0dcaf0;border-color:#0dcaf0}.btn-outline-info:hover{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-check:focus+.btn-outline-info,.btn-outline-info:focus{box-shadow:0 0 0 .25rem rgba(13,202,240,.5)}.btn-check:active+.btn-outline-info,.btn-check:checked+.btn-outline-info,.btn-outline-info.active,.btn-outline-info.dropdown-toggle.show,.btn-outline-info:active{color:#000;background-color:#0dcaf0;border-color:#0dcaf0}.btn-check:active+.btn-outline-info:focus,.btn-check:checked+.btn-outline-info:focus,.btn-outline-info.active:focus,.btn-outline-info.dropdown-toggle.show:focus,.btn-outline-info:active:focus{box-shadow:0 0 0 .25rem rgba(13,202,240,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#0dcaf0;background-color:transparent}.btn-outline-warning{color:#ffc107;border-color:#ffc107}.btn-outline-warning:hover{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-check:focus+.btn-outline-warning,.btn-outline-warning:focus{box-shadow:0 0 0 .25rem rgba(255,193,7,.5)}.btn-check:active+.btn-outline-warning,.btn-check:checked+.btn-outline-warning,.btn-outline-warning.active,.btn-outline-warning.dropdown-toggle.show,.btn-outline-warning:active{color:#000;background-color:#ffc107;border-color:#ffc107}.btn-check:active+.btn-outline-warning:focus,.btn-check:checked+.btn-outline-warning:focus,.btn-outline-warning.active:focus,.btn-outline-warning.dropdown-toggle.show:focus,.btn-outline-warning:active:focus{box-shadow:0 0 0 .25rem rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-check:focus+.btn-outline-danger,.btn-outline-danger:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-check:active+.btn-outline-danger,.btn-check:checked+.btn-outline-danger,.btn-outline-danger.active,.btn-outline-danger.dropdown-toggle.show,.btn-outline-danger:active{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-check:active+.btn-outline-danger:focus,.btn-check:checked+.btn-outline-danger:focus,.btn-outline-danger.active:focus,.btn-outline-danger.dropdown-toggle.show:focus,.btn-outline-danger:active:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-light{color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light:hover{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-check:focus+.btn-outline-light,.btn-outline-light:focus{box-shadow:0 0 0 .25rem rgba(248,249,250,.5)}.btn-check:active+.btn-outline-light,.btn-check:checked+.btn-outline-light,.btn-outline-light.active,.btn-outline-light.dropdown-toggle.show,.btn-outline-light:active{color:#000;background-color:#f8f9fa;border-color:#f8f9fa}.btn-check:active+.btn-outline-light:focus,.btn-check:checked+.btn-outline-light:focus,.btn-outline-light.active:focus,.btn-outline-light.dropdown-toggle.show:focus,.btn-outline-light:active:focus{box-shadow:0 0 0 .25rem rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-dark{color:#212529;border-color:#212529}.btn-outline-dark:hover{color:#fff;background-color:#212529;border-color:#212529}.btn-check:focus+.btn-outline-dark,.btn-outline-dark:focus{box-shadow:0 0 0 .25rem rgba(33,37,41,.5)}.btn-check:active+.btn-outline-dark,.btn-check:checked+.btn-outline-dark,.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#212529;border-color:#212529}.btn-check:active+.btn-outline-dark:focus,.btn-check:checked+.btn-outline-dark:focus,.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .25rem rgba(33,37,41,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#212529;background-color:transparent}.btn-link{font-weight:400;color:#0d6efd;text-decoration:underline}.btn-link:hover{color:#0a58ca}.btn-link.disabled,.btn-link:disabled{color:#6c757d}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown,.dropend,.dropstart,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;z-index:1000;display:none;min-width:10rem;padding:.5rem 0;margin:0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:.125rem}.dropdown-menu-start{--bs-position:start}.dropdown-menu-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-end{--bs-position:end}.dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media (min-width:576px){.dropdown-menu-sm-start{--bs-position:start}.dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-sm-end{--bs-position:end}.dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media (min-width:768px){.dropdown-menu-md-start{--bs-position:start}.dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-md-end{--bs-position:end}.dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media (min-width:992px){.dropdown-menu-lg-start{--bs-position:start}.dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-lg-end{--bs-position:end}.dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1200px){.dropdown-menu-xl-start{--bs-position:start}.dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xl-end{--bs-position:end}.dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media (min-width:1400px){.dropdown-menu-xxl-start{--bs-position:start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}.dropdown-menu-xxl-end{--bs-position:end}.dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid rgba(0,0,0,.15)}.dropdown-item{display:block;width:100%;padding:.25rem 1rem;clear:both;font-weight:400;color:#212529;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#1e2125;background-color:#e9ecef}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#0d6efd}.dropdown-item.disabled,.dropdown-item:disabled{color:#adb5bd;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1rem;margin-bottom:0;font-size:.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1rem;color:#212529}.dropdown-menu-dark{color:#dee2e6;background-color:#343a40;border-color:rgba(0,0,0,.15)}.dropdown-menu-dark .dropdown-item{color:#dee2e6}.dropdown-menu-dark .dropdown-item:focus,.dropdown-menu-dark .dropdown-item:hover{color:#fff;background-color:rgba(255,255,255,.15)}.dropdown-menu-dark .dropdown-item.active,.dropdown-menu-dark .dropdown-item:active{color:#fff;background-color:#0d6efd}.dropdown-menu-dark .dropdown-item.disabled,.dropdown-menu-dark .dropdown-item:disabled{color:#adb5bd}.dropdown-menu-dark .dropdown-divider{border-color:rgba(0,0,0,.15)}.dropdown-menu-dark .dropdown-item-text{color:#dee2e6}.dropdown-menu-dark .dropdown-header{color:#adb5bd}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child){margin-left:-1px}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn~.btn{border-top-left-radius:0;border-top-right-radius:0}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem;color:#0d6efd;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:#0a58ca}.nav-link.disabled{color:#6c757d;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-link{margin-bottom:-1px;background:0 0;border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #dee2e6;isolation:isolate}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{background:0 0;border:0;border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#0d6efd}.nav-fill .nav-item,.nav-fill>.nav-link{flex:1 1 auto;text-align:center}.nav-justified .nav-item,.nav-justified>.nav-link{flex-basis:0;flex-grow:1;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;text-decoration:none;white-space:nowrap}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem;transition:box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 .25rem}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:100%}.navbar-nav-scroll{max-height:var(--bs-scroll-height,75vh);overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}.navbar-expand-sm .offcanvas-header{display:none}.navbar-expand-sm .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand-sm .offcanvas-bottom,.navbar-expand-sm .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand-sm .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}.navbar-expand-md .offcanvas-header{display:none}.navbar-expand-md .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand-md .offcanvas-bottom,.navbar-expand-md .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand-md .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}.navbar-expand-lg .offcanvas-header{display:none}.navbar-expand-lg .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand-lg .offcanvas-bottom,.navbar-expand-lg .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand-lg .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}.navbar-expand-xl .offcanvas-header{display:none}.navbar-expand-xl .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand-xl .offcanvas-bottom,.navbar-expand-xl .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand-xl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}@media (min-width:1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}.navbar-expand-xxl .offcanvas-header{display:none}.navbar-expand-xxl .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand-xxl .offcanvas-bottom,.navbar-expand-xxl .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand-xxl .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-expand .offcanvas-header{display:none}.navbar-expand .offcanvas{position:inherit;bottom:0;z-index:1000;flex-grow:1;visibility:visible!important;background-color:transparent;border-right:0;border-left:0;transition:none;transform:none}.navbar-expand .offcanvas-bottom,.navbar-expand .offcanvas-top{height:auto;border-top:0;border-bottom:0}.navbar-expand .offcanvas-body{display:flex;flex-grow:0;padding:0;overflow-y:visible}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.55)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.55);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-light .navbar-text{color:rgba(0,0,0,.55)}.navbar-light .navbar-text a,.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.55)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-dark .navbar-text{color:rgba(255,255,255,.55)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:1rem 1rem}.card-title{margin-bottom:.5rem}.card-subtitle{margin-top:-.25rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link+.card-link{margin-left:1rem}.card-header{padding:.5rem 1rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-footer{padding:.5rem 1rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-right:-.5rem;margin-bottom:-.5rem;margin-left:-.5rem;border-bottom:0}.card-header-pills{margin-right:-.5rem;margin-left:-.5rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1rem;border-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-group>.card{margin-bottom:.75rem}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:1rem 1.25rem;font-size:1rem;color:#212529;text-align:left;background-color:#fff;border:0;border-radius:0;overflow-anchor:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease}@media (prefers-reduced-motion:reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:#0c63e4;background-color:#e7f1ff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.125)}.accordion-button:not(.collapsed)::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");transform:rotate(-180deg)}.accordion-button::after{flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;content:"";background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:1.25rem;transition:transform .2s ease-in-out}@media (prefers-reduced-motion:reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.accordion-header{margin-bottom:0}.accordion-item{background-color:#fff;border:1px solid rgba(0,0,0,.125)}.accordion-item:first-of-type{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.accordion-item:first-of-type .accordion-button{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.accordion-item:last-of-type .accordion-button.collapsed{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.accordion-item:last-of-type .accordion-collapse{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.accordion-body{padding:1rem 1.25rem}.accordion-flush .accordion-collapse{border-width:0}.accordion-flush .accordion-item{border-right:0;border-left:0;border-radius:0}.accordion-flush .accordion-item:first-child{border-top:0}.accordion-flush .accordion-item:last-child{border-bottom:0}.accordion-flush .accordion-item .accordion-button{border-radius:0}.breadcrumb{display:flex;flex-wrap:wrap;padding:0 0;margin-bottom:1rem;list-style:none}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;color:#6c757d;content:var(--bs-breadcrumb-divider, "/")}.breadcrumb-item.active{color:#6c757d}.pagination{display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;color:#0d6efd;text-decoration:none;background-color:#fff;border:1px solid #dee2e6;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:#0a58ca;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:3;color:#0a58ca;background-color:#e9ecef;outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.page-item:not(:first-child) .page-link{margin-left:-1px}.page-item.active .page-link{z-index:3;color:#fff;background-color:#0d6efd;border-color:#0d6efd}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;background-color:#fff;border-color:#dee2e6}.page-link{padding:.375rem .75rem}.page-item:first-child .page-link{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}.alert-primary{color:#084298;background-color:#cfe2ff;border-color:#b6d4fe}.alert-primary .alert-link{color:#06357a}.alert-secondary{color:#41464b;background-color:#e2e3e5;border-color:#d3d6d8}.alert-secondary .alert-link{color:#34383c}.alert-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert-success .alert-link{color:#0c4128}.alert-info{color:#055160;background-color:#cff4fc;border-color:#b6effb}.alert-info .alert-link{color:#04414d}.alert-warning{color:#664d03;background-color:#fff3cd;border-color:#ffecb5}.alert-warning .alert-link{color:#523e02}.alert-danger{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}.alert-danger .alert-link{color:#6a1a21}.alert-light{color:#636464;background-color:#fefefe;border-color:#fdfdfe}.alert-light .alert-link{color:#4f5050}.alert-dark{color:#141619;background-color:#d3d3d4;border-color:#bcbebf}.alert-dark .alert-link{color:#101214}@-webkit-keyframes progress-bar-stripes{0%{background-position-x:1rem}}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress{display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#0d6efd;transition:width .6s ease}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{-webkit-animation:1s linear infinite progress-bar-stripes;animation:1s linear infinite progress-bar-stripes}@media (prefers-reduced-motion:reduce){.progress-bar-animated{-webkit-animation:none;animation:none}}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:.25rem}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>li::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.5rem 1rem;color:#212529;text-decoration:none;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;pointer-events:none;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#0d6efd;border-color:#0d6efd}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:-1px;border-top-width:1px}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}@media (min-width:576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:1400px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child{border-bottom-left-radius:.25rem;border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child{border-top-right-radius:.25rem;border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 1px}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{color:#084298;background-color:#cfe2ff}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#084298;background-color:#bacbe6}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#084298;border-color:#084298}.list-group-item-secondary{color:#41464b;background-color:#e2e3e5}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#41464b;background-color:#cbccce}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#41464b;border-color:#41464b}.list-group-item-success{color:#0f5132;background-color:#d1e7dd}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#0f5132;background-color:#bcd0c7}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#0f5132;border-color:#0f5132}.list-group-item-info{color:#055160;background-color:#cff4fc}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#055160;background-color:#badce3}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#055160;border-color:#055160}.list-group-item-warning{color:#664d03;background-color:#fff3cd}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#664d03;background-color:#e6dbb9}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#664d03;border-color:#664d03}.list-group-item-danger{color:#842029;background-color:#f8d7da}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#842029;background-color:#dfc2c4}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#842029;border-color:#842029}.list-group-item-light{color:#636464;background-color:#fefefe}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#636464;background-color:#e5e5e5}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#636464;border-color:#636464}.list-group-item-dark{color:#141619;background-color:#d3d3d4}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#141619;background-color:#bebebf}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#141619;border-color:#141619}.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5}.btn-close:hover{color:#000;text-decoration:none;opacity:.75}.btn-close:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);opacity:1}.btn-close.disabled,.btn-close:disabled{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.25}.btn-close-white{filter:invert(1) grayscale(100%) brightness(200%)}.toast{width:350px;max-width:100%;font-size:.875rem;pointer-events:auto;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);border-radius:.25rem}.toast.showing{opacity:0}.toast:not(.show){display:none}.toast-container{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;pointer-events:none}.toast-container>:not(:last-child){margin-bottom:.75rem}.toast-header{display:flex;align-items:center;padding:.5rem .75rem;color:#6c757d;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05);border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.toast-header .btn-close{margin-right:-.375rem;margin-left:.75rem}.toast-body{padding:.75rem;word-wrap:break-word}.modal{position:fixed;top:0;left:0;z-index:1055;display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1050;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.modal-header .btn-close{padding:.5rem .5rem;margin:-.5rem -.5rem -.5rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;flex:1 1 auto;padding:1rem}.modal-footer{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:1px solid #dee2e6;border-bottom-right-radius:calc(.3rem - 1px);border-bottom-left-radius:calc(.3rem - 1px)}.modal-footer>*{margin:.25rem}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{height:calc(100% - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg,.modal-xl{max-width:800px}}@media (min-width:1200px){.modal-xl{max-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}.modal-fullscreen .modal-footer{border-radius:0}@media (max-width:575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}.modal-fullscreen-sm-down .modal-footer{border-radius:0}}@media (max-width:767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}.modal-fullscreen-md-down .modal-footer{border-radius:0}}@media (max-width:991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}.modal-fullscreen-lg-down .modal-footer{border-radius:0}}@media (max-width:1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}.modal-fullscreen-xl-down .modal-footer{border-radius:0}}@media (max-width:1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}.modal-fullscreen-xxl-down .modal-footer{border-radius:0}}.tooltip{position:absolute;z-index:1080;display:block;margin:0;font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .tooltip-arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[data-popper-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:0}.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:-1px;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[data-popper-placement^=right],.bs-tooltip-end{padding:0 .4rem}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,.bs-tooltip-end .tooltip-arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,.bs-tooltip-end .tooltip-arrow::before{right:-1px;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[data-popper-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:0}.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:-1px;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[data-popper-placement^=left],.bs-tooltip-start{padding:0 .4rem}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,.bs-tooltip-start .tooltip-arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before,.bs-tooltip-start .tooltip-arrow::before{left:-1px;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1070;display:block;max-width:276px;font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .popover-arrow{position:absolute;display:block;width:1rem;height:.5rem}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-.5rem - 1px)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,.bs-popover-end>.popover-arrow{left:calc(-.5rem - 1px);width:.5rem;height:1rem}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-end>.popover-arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-.5rem - 1px)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f0f0f0}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,.bs-popover-start>.popover-arrow{right:calc(-.5rem - 1px);width:.5rem;height:1rem}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(0,0,0,.25)}.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-start>.popover-arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem 1rem;margin-bottom:0;font-size:1rem;background-color:#f0f0f0;border-bottom:1px solid rgba(0,0,0,.2);border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:1rem 1rem;color:#212529}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-end,.carousel-fade .active.carousel-item-start{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:0 0;border:0;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}.carousel-dark .carousel-control-next-icon,.carousel-dark .carousel-control-prev-icon{filter:invert(1) grayscale(100)}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}.carousel-dark .carousel-caption{color:#000}@-webkit-keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;border:.25em solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:.75s linear infinite spinner-border;animation:.75s linear infinite spinner-border}.spinner-border-sm{width:1rem;height:1rem;border-width:.2em}@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{display:inline-block;width:2rem;height:2rem;vertical-align:-.125em;background-color:currentColor;border-radius:50%;opacity:0;-webkit-animation:.75s linear infinite spinner-grow;animation:.75s linear infinite spinner-grow}.spinner-grow-sm{width:1rem;height:1rem}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{-webkit-animation-duration:1.5s;animation-duration:1.5s}}.offcanvas{position:fixed;bottom:0;z-index:1045;display:flex;flex-direction:column;max-width:100%;visibility:hidden;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.fade{opacity:0}.offcanvas-backdrop.show{opacity:.5}.offcanvas-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem}.offcanvas-header .btn-close{padding:.5rem .5rem;margin-top:-.5rem;margin-right:-.5rem;margin-bottom:-.5rem}.offcanvas-title{margin-bottom:0;line-height:1.5}.offcanvas-body{flex-grow:1;padding:1rem 1rem;overflow-y:auto}.offcanvas-start{top:0;left:0;width:400px;border-right:1px solid rgba(0,0,0,.2);transform:translateX(-100%)}.offcanvas-end{top:0;right:0;width:400px;border-left:1px solid rgba(0,0,0,.2);transform:translateX(100%)}.offcanvas-top{top:0;right:0;left:0;height:30vh;max-height:100%;border-bottom:1px solid rgba(0,0,0,.2);transform:translateY(-100%)}.offcanvas-bottom{right:0;left:0;height:30vh;max-height:100%;border-top:1px solid rgba(0,0,0,.2);transform:translateY(100%)}.offcanvas.show{transform:none}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentColor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.2em}.placeholder-glow .placeholder{-webkit-animation:placeholder-glow 2s ease-in-out infinite;animation:placeholder-glow 2s ease-in-out infinite}@-webkit-keyframes placeholder-glow{50%{opacity:.2}}@keyframes placeholder-glow{50%{opacity:.2}}.placeholder-wave{-webkit-mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);-webkit-mask-size:200% 100%;mask-size:200% 100%;-webkit-animation:placeholder-wave 2s linear infinite;animation:placeholder-wave 2s linear infinite}@-webkit-keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.clearfix::after{display:block;clear:both;content:""}.link-primary{color:#0d6efd}.link-primary:focus,.link-primary:hover{color:#0a58ca}.link-secondary{color:#6c757d}.link-secondary:focus,.link-secondary:hover{color:#565e64}.link-success{color:#198754}.link-success:focus,.link-success:hover{color:#146c43}.link-info{color:#0dcaf0}.link-info:focus,.link-info:hover{color:#3dd5f3}.link-warning{color:#ffc107}.link-warning:focus,.link-warning:hover{color:#ffcd39}.link-danger{color:#dc3545}.link-danger:focus,.link-danger:hover{color:#b02a37}.link-light{color:#f8f9fa}.link-light:focus,.link-light:hover{color:#f9fafb}.link-dark{color:#212529}.link-dark:focus,.link-dark:hover{color:#1a1e21}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:calc(3 / 4 * 100%)}.ratio-16x9{--bs-aspect-ratio:calc(9 / 16 * 100%)}.ratio-21x9{--bs-aspect-ratio:calc(9 / 21 * 100%)}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}@media (min-width:576px){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:768px){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:992px){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:1200px){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:1400px){.sticky-xxl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:1px;min-height:1em;background-color:currentColor;opacity:.25}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-start{float:left!important}.float-end{float:right!important}.float-none{float:none!important}.opacity-0{opacity:0!important}.opacity-25{opacity:.25!important}.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}.opacity-100{opacity:1!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.overflow-visible{overflow:visible!important}.overflow-scroll{overflow:scroll!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-grid{display:grid!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.top-0{top:0!important}.top-50{top:50%!important}.top-100{top:100%!important}.bottom-0{bottom:0!important}.bottom-50{bottom:50%!important}.bottom-100{bottom:100%!important}.start-0{left:0!important}.start-50{left:50%!important}.start-100{left:100%!important}.end-0{right:0!important}.end-50{right:50%!important}.end-100{right:100%!important}.translate-middle{transform:translate(-50%,-50%)!important}.translate-middle-x{transform:translateX(-50%)!important}.translate-middle-y{transform:translateY(-50%)!important}.border{border:1px solid #dee2e6!important}.border-0{border:0!important}.border-top{border-top:1px solid #dee2e6!important}.border-top-0{border-top:0!important}.border-end{border-right:1px solid #dee2e6!important}.border-end-0{border-right:0!important}.border-bottom{border-bottom:1px solid #dee2e6!important}.border-bottom-0{border-bottom:0!important}.border-start{border-left:1px solid #dee2e6!important}.border-start-0{border-left:0!important}.border-primary{border-color:#0d6efd!important}.border-secondary{border-color:#6c757d!important}.border-success{border-color:#198754!important}.border-info{border-color:#0dcaf0!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#212529!important}.border-white{border-color:#fff!important}.border-1{border-width:1px!important}.border-2{border-width:2px!important}.border-3{border-width:3px!important}.border-4{border-width:4px!important}.border-5{border-width:5px!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-0{gap:0!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}.gap-5{gap:3rem!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.justify-content-evenly{justify-content:space-evenly!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-auto{margin-bottom:auto!important}.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}.font-monospace{font-family:var(--bs-font-monospace)!important}.fs-1{font-size:calc(1.375rem + 1.5vw)!important}.fs-2{font-size:calc(1.325rem + .9vw)!important}.fs-3{font-size:calc(1.3rem + .6vw)!important}.fs-4{font-size:calc(1.275rem + .3vw)!important}.fs-5{font-size:1.25rem!important}.fs-6{font-size:1rem!important}.fst-italic{font-style:italic!important}.fst-normal{font-style:normal!important}.fw-light{font-weight:300!important}.fw-lighter{font-weight:lighter!important}.fw-normal{font-weight:400!important}.fw-bold{font-weight:700!important}.fw-bolder{font-weight:bolder!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.5!important}.lh-lg{line-height:2!important}.text-start{text-align:left!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-break{word-wrap:break-word!important;word-break:break-word!important}.text-primary{--bs-text-opacity:1;color:rgba(var(--bs-primary-rgb),var(--bs-text-opacity))!important}.text-secondary{--bs-text-opacity:1;color:rgba(var(--bs-secondary-rgb),var(--bs-text-opacity))!important}.text-success{--bs-text-opacity:1;color:rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important}.text-info{--bs-text-opacity:1;color:rgba(var(--bs-info-rgb),var(--bs-text-opacity))!important}.text-warning{--bs-text-opacity:1;color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important}.text-danger{--bs-text-opacity:1;color:rgba(var(--bs-danger-rgb),var(--bs-text-opacity))!important}.text-light{--bs-text-opacity:1;color:rgba(var(--bs-light-rgb),var(--bs-text-opacity))!important}.text-dark{--bs-text-opacity:1;color:rgba(var(--bs-dark-rgb),var(--bs-text-opacity))!important}.text-black{--bs-text-opacity:1;color:rgba(var(--bs-black-rgb),var(--bs-text-opacity))!important}.text-white{--bs-text-opacity:1;color:rgba(var(--bs-white-rgb),var(--bs-text-opacity))!important}.text-body{--bs-text-opacity:1;color:rgba(var(--bs-body-rgb),var(--bs-text-opacity))!important}.text-muted{--bs-text-opacity:1;color:#6c757d!important}.text-black-50{--bs-text-opacity:1;color:rgba(0,0,0,.5)!important}.text-white-50{--bs-text-opacity:1;color:rgba(255,255,255,.5)!important}.text-reset{--bs-text-opacity:1;color:inherit!important}.text-opacity-25{--bs-text-opacity:0.25}.text-opacity-50{--bs-text-opacity:0.5}.text-opacity-75{--bs-text-opacity:0.75}.text-opacity-100{--bs-text-opacity:1}.bg-primary{--bs-bg-opacity:1;background-color:rgba(var(--bs-primary-rgb),var(--bs-bg-opacity))!important}.bg-secondary{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity))!important}.bg-success{--bs-bg-opacity:1;background-color:rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important}.bg-info{--bs-bg-opacity:1;background-color:rgba(var(--bs-info-rgb),var(--bs-bg-opacity))!important}.bg-warning{--bs-bg-opacity:1;background-color:rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))!important}.bg-danger{--bs-bg-opacity:1;background-color:rgba(var(--bs-danger-rgb),var(--bs-bg-opacity))!important}.bg-light{--bs-bg-opacity:1;background-color:rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important}.bg-dark{--bs-bg-opacity:1;background-color:rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important}.bg-black{--bs-bg-opacity:1;background-color:rgba(var(--bs-black-rgb),var(--bs-bg-opacity))!important}.bg-white{--bs-bg-opacity:1;background-color:rgba(var(--bs-white-rgb),var(--bs-bg-opacity))!important}.bg-body{--bs-bg-opacity:1;background-color:rgba(var(--bs-body-rgb),var(--bs-bg-opacity))!important}.bg-transparent{--bs-bg-opacity:1;background-color:transparent!important}.bg-opacity-10{--bs-bg-opacity:0.1}.bg-opacity-25{--bs-bg-opacity:0.25}.bg-opacity-50{--bs-bg-opacity:0.5}.bg-opacity-75{--bs-bg-opacity:0.75}.bg-opacity-100{--bs-bg-opacity:1}.bg-gradient{background-image:var(--bs-gradient)!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:.25rem!important}.rounded-0{border-radius:0!important}.rounded-1{border-radius:.2rem!important}.rounded-2{border-radius:.25rem!important}.rounded-3{border-radius:.3rem!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-end{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-start{border-bottom-left-radius:.25rem!important;border-top-left-radius:.25rem!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}@media (min-width:576px){.float-sm-start{float:left!important}.float-sm-end{float:right!important}.float-sm-none{float:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-grid{display:grid!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.d-sm-none{display:none!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-sm-0{gap:0!important}.gap-sm-1{gap:.25rem!important}.gap-sm-2{gap:.5rem!important}.gap-sm-3{gap:1rem!important}.gap-sm-4{gap:1.5rem!important}.gap-sm-5{gap:3rem!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.justify-content-sm-evenly{justify-content:space-evenly!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-auto{margin-top:auto!important}.me-sm-0{margin-right:0!important}.me-sm-1{margin-right:.25rem!important}.me-sm-2{margin-right:.5rem!important}.me-sm-3{margin-right:1rem!important}.me-sm-4{margin-right:1.5rem!important}.me-sm-5{margin-right:3rem!important}.me-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-auto{margin-bottom:auto!important}.ms-sm-0{margin-left:0!important}.ms-sm-1{margin-left:.25rem!important}.ms-sm-2{margin-left:.5rem!important}.ms-sm-3{margin-left:1rem!important}.ms-sm-4{margin-left:1.5rem!important}.ms-sm-5{margin-left:3rem!important}.ms-sm-auto{margin-left:auto!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pe-sm-0{padding-right:0!important}.pe-sm-1{padding-right:.25rem!important}.pe-sm-2{padding-right:.5rem!important}.pe-sm-3{padding-right:1rem!important}.pe-sm-4{padding-right:1.5rem!important}.pe-sm-5{padding-right:3rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.ps-sm-0{padding-left:0!important}.ps-sm-1{padding-left:.25rem!important}.ps-sm-2{padding-left:.5rem!important}.ps-sm-3{padding-left:1rem!important}.ps-sm-4{padding-left:1.5rem!important}.ps-sm-5{padding-left:3rem!important}.text-sm-start{text-align:left!important}.text-sm-end{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.float-md-start{float:left!important}.float-md-end{float:right!important}.float-md-none{float:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-grid{display:grid!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.d-md-none{display:none!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-md-0{gap:0!important}.gap-md-1{gap:.25rem!important}.gap-md-2{gap:.5rem!important}.gap-md-3{gap:1rem!important}.gap-md-4{gap:1.5rem!important}.gap-md-5{gap:3rem!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.justify-content-md-evenly{justify-content:space-evenly!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-auto{margin-top:auto!important}.me-md-0{margin-right:0!important}.me-md-1{margin-right:.25rem!important}.me-md-2{margin-right:.5rem!important}.me-md-3{margin-right:1rem!important}.me-md-4{margin-right:1.5rem!important}.me-md-5{margin-right:3rem!important}.me-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-auto{margin-bottom:auto!important}.ms-md-0{margin-left:0!important}.ms-md-1{margin-left:.25rem!important}.ms-md-2{margin-left:.5rem!important}.ms-md-3{margin-left:1rem!important}.ms-md-4{margin-left:1.5rem!important}.ms-md-5{margin-left:3rem!important}.ms-md-auto{margin-left:auto!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pe-md-0{padding-right:0!important}.pe-md-1{padding-right:.25rem!important}.pe-md-2{padding-right:.5rem!important}.pe-md-3{padding-right:1rem!important}.pe-md-4{padding-right:1.5rem!important}.pe-md-5{padding-right:3rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.ps-md-0{padding-left:0!important}.ps-md-1{padding-left:.25rem!important}.ps-md-2{padding-left:.5rem!important}.ps-md-3{padding-left:1rem!important}.ps-md-4{padding-left:1.5rem!important}.ps-md-5{padding-left:3rem!important}.text-md-start{text-align:left!important}.text-md-end{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.float-lg-start{float:left!important}.float-lg-end{float:right!important}.float-lg-none{float:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-grid{display:grid!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.d-lg-none{display:none!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-lg-0{gap:0!important}.gap-lg-1{gap:.25rem!important}.gap-lg-2{gap:.5rem!important}.gap-lg-3{gap:1rem!important}.gap-lg-4{gap:1.5rem!important}.gap-lg-5{gap:3rem!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.justify-content-lg-evenly{justify-content:space-evenly!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-auto{margin-top:auto!important}.me-lg-0{margin-right:0!important}.me-lg-1{margin-right:.25rem!important}.me-lg-2{margin-right:.5rem!important}.me-lg-3{margin-right:1rem!important}.me-lg-4{margin-right:1.5rem!important}.me-lg-5{margin-right:3rem!important}.me-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-auto{margin-bottom:auto!important}.ms-lg-0{margin-left:0!important}.ms-lg-1{margin-left:.25rem!important}.ms-lg-2{margin-left:.5rem!important}.ms-lg-3{margin-left:1rem!important}.ms-lg-4{margin-left:1.5rem!important}.ms-lg-5{margin-left:3rem!important}.ms-lg-auto{margin-left:auto!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pe-lg-0{padding-right:0!important}.pe-lg-1{padding-right:.25rem!important}.pe-lg-2{padding-right:.5rem!important}.pe-lg-3{padding-right:1rem!important}.pe-lg-4{padding-right:1.5rem!important}.pe-lg-5{padding-right:3rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.ps-lg-0{padding-left:0!important}.ps-lg-1{padding-left:.25rem!important}.ps-lg-2{padding-left:.5rem!important}.ps-lg-3{padding-left:1rem!important}.ps-lg-4{padding-left:1.5rem!important}.ps-lg-5{padding-left:3rem!important}.text-lg-start{text-align:left!important}.text-lg-end{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.float-xl-start{float:left!important}.float-xl-end{float:right!important}.float-xl-none{float:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-grid{display:grid!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.d-xl-none{display:none!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-xl-0{gap:0!important}.gap-xl-1{gap:.25rem!important}.gap-xl-2{gap:.5rem!important}.gap-xl-3{gap:1rem!important}.gap-xl-4{gap:1.5rem!important}.gap-xl-5{gap:3rem!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.justify-content-xl-evenly{justify-content:space-evenly!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-auto{margin-top:auto!important}.me-xl-0{margin-right:0!important}.me-xl-1{margin-right:.25rem!important}.me-xl-2{margin-right:.5rem!important}.me-xl-3{margin-right:1rem!important}.me-xl-4{margin-right:1.5rem!important}.me-xl-5{margin-right:3rem!important}.me-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-auto{margin-bottom:auto!important}.ms-xl-0{margin-left:0!important}.ms-xl-1{margin-left:.25rem!important}.ms-xl-2{margin-left:.5rem!important}.ms-xl-3{margin-left:1rem!important}.ms-xl-4{margin-left:1.5rem!important}.ms-xl-5{margin-left:3rem!important}.ms-xl-auto{margin-left:auto!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pe-xl-0{padding-right:0!important}.pe-xl-1{padding-right:.25rem!important}.pe-xl-2{padding-right:.5rem!important}.pe-xl-3{padding-right:1rem!important}.pe-xl-4{padding-right:1.5rem!important}.pe-xl-5{padding-right:3rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.ps-xl-0{padding-left:0!important}.ps-xl-1{padding-left:.25rem!important}.ps-xl-2{padding-left:.5rem!important}.ps-xl-3{padding-left:1rem!important}.ps-xl-4{padding-left:1.5rem!important}.ps-xl-5{padding-left:3rem!important}.text-xl-start{text-align:left!important}.text-xl-end{text-align:right!important}.text-xl-center{text-align:center!important}}@media (min-width:1400px){.float-xxl-start{float:left!important}.float-xxl-end{float:right!important}.float-xxl-none{float:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-grid{display:grid!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}.d-xxl-none{display:none!important}.flex-xxl-fill{flex:1 1 auto!important}.flex-xxl-row{flex-direction:row!important}.flex-xxl-column{flex-direction:column!important}.flex-xxl-row-reverse{flex-direction:row-reverse!important}.flex-xxl-column-reverse{flex-direction:column-reverse!important}.flex-xxl-grow-0{flex-grow:0!important}.flex-xxl-grow-1{flex-grow:1!important}.flex-xxl-shrink-0{flex-shrink:0!important}.flex-xxl-shrink-1{flex-shrink:1!important}.flex-xxl-wrap{flex-wrap:wrap!important}.flex-xxl-nowrap{flex-wrap:nowrap!important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse!important}.gap-xxl-0{gap:0!important}.gap-xxl-1{gap:.25rem!important}.gap-xxl-2{gap:.5rem!important}.gap-xxl-3{gap:1rem!important}.gap-xxl-4{gap:1.5rem!important}.gap-xxl-5{gap:3rem!important}.justify-content-xxl-start{justify-content:flex-start!important}.justify-content-xxl-end{justify-content:flex-end!important}.justify-content-xxl-center{justify-content:center!important}.justify-content-xxl-between{justify-content:space-between!important}.justify-content-xxl-around{justify-content:space-around!important}.justify-content-xxl-evenly{justify-content:space-evenly!important}.align-items-xxl-start{align-items:flex-start!important}.align-items-xxl-end{align-items:flex-end!important}.align-items-xxl-center{align-items:center!important}.align-items-xxl-baseline{align-items:baseline!important}.align-items-xxl-stretch{align-items:stretch!important}.align-content-xxl-start{align-content:flex-start!important}.align-content-xxl-end{align-content:flex-end!important}.align-content-xxl-center{align-content:center!important}.align-content-xxl-between{align-content:space-between!important}.align-content-xxl-around{align-content:space-around!important}.align-content-xxl-stretch{align-content:stretch!important}.align-self-xxl-auto{align-self:auto!important}.align-self-xxl-start{align-self:flex-start!important}.align-self-xxl-end{align-self:flex-end!important}.align-self-xxl-center{align-self:center!important}.align-self-xxl-baseline{align-self:baseline!important}.align-self-xxl-stretch{align-self:stretch!important}.order-xxl-first{order:-1!important}.order-xxl-0{order:0!important}.order-xxl-1{order:1!important}.order-xxl-2{order:2!important}.order-xxl-3{order:3!important}.order-xxl-4{order:4!important}.order-xxl-5{order:5!important}.order-xxl-last{order:6!important}.m-xxl-0{margin:0!important}.m-xxl-1{margin:.25rem!important}.m-xxl-2{margin:.5rem!important}.m-xxl-3{margin:1rem!important}.m-xxl-4{margin:1.5rem!important}.m-xxl-5{margin:3rem!important}.m-xxl-auto{margin:auto!important}.mx-xxl-0{margin-right:0!important;margin-left:0!important}.mx-xxl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xxl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xxl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xxl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xxl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xxl-auto{margin-right:auto!important;margin-left:auto!important}.my-xxl-0{margin-top:0!important;margin-bottom:0!important}.my-xxl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xxl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xxl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xxl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xxl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xxl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xxl-0{margin-top:0!important}.mt-xxl-1{margin-top:.25rem!important}.mt-xxl-2{margin-top:.5rem!important}.mt-xxl-3{margin-top:1rem!important}.mt-xxl-4{margin-top:1.5rem!important}.mt-xxl-5{margin-top:3rem!important}.mt-xxl-auto{margin-top:auto!important}.me-xxl-0{margin-right:0!important}.me-xxl-1{margin-right:.25rem!important}.me-xxl-2{margin-right:.5rem!important}.me-xxl-3{margin-right:1rem!important}.me-xxl-4{margin-right:1.5rem!important}.me-xxl-5{margin-right:3rem!important}.me-xxl-auto{margin-right:auto!important}.mb-xxl-0{margin-bottom:0!important}.mb-xxl-1{margin-bottom:.25rem!important}.mb-xxl-2{margin-bottom:.5rem!important}.mb-xxl-3{margin-bottom:1rem!important}.mb-xxl-4{margin-bottom:1.5rem!important}.mb-xxl-5{margin-bottom:3rem!important}.mb-xxl-auto{margin-bottom:auto!important}.ms-xxl-0{margin-left:0!important}.ms-xxl-1{margin-left:.25rem!important}.ms-xxl-2{margin-left:.5rem!important}.ms-xxl-3{margin-left:1rem!important}.ms-xxl-4{margin-left:1.5rem!important}.ms-xxl-5{margin-left:3rem!important}.ms-xxl-auto{margin-left:auto!important}.p-xxl-0{padding:0!important}.p-xxl-1{padding:.25rem!important}.p-xxl-2{padding:.5rem!important}.p-xxl-3{padding:1rem!important}.p-xxl-4{padding:1.5rem!important}.p-xxl-5{padding:3rem!important}.px-xxl-0{padding-right:0!important;padding-left:0!important}.px-xxl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xxl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xxl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xxl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xxl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xxl-0{padding-top:0!important;padding-bottom:0!important}.py-xxl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xxl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xxl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xxl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xxl-5{padding-top:3rem!important;padding-bottom:3rem!important}.pt-xxl-0{padding-top:0!important}.pt-xxl-1{padding-top:.25rem!important}.pt-xxl-2{padding-top:.5rem!important}.pt-xxl-3{padding-top:1rem!important}.pt-xxl-4{padding-top:1.5rem!important}.pt-xxl-5{padding-top:3rem!important}.pe-xxl-0{padding-right:0!important}.pe-xxl-1{padding-right:.25rem!important}.pe-xxl-2{padding-right:.5rem!important}.pe-xxl-3{padding-right:1rem!important}.pe-xxl-4{padding-right:1.5rem!important}.pe-xxl-5{padding-right:3rem!important}.pb-xxl-0{padding-bottom:0!important}.pb-xxl-1{padding-bottom:.25rem!important}.pb-xxl-2{padding-bottom:.5rem!important}.pb-xxl-3{padding-bottom:1rem!important}.pb-xxl-4{padding-bottom:1.5rem!important}.pb-xxl-5{padding-bottom:3rem!important}.ps-xxl-0{padding-left:0!important}.ps-xxl-1{padding-left:.25rem!important}.ps-xxl-2{padding-left:.5rem!important}.ps-xxl-3{padding-left:1rem!important}.ps-xxl-4{padding-left:1.5rem!important}.ps-xxl-5{padding-left:3rem!important}.text-xxl-start{text-align:left!important}.text-xxl-end{text-align:right!important}.text-xxl-center{text-align:center!important}}@media (min-width:1200px){.fs-1{font-size:2.5rem!important}.fs-2{font-size:2rem!important}.fs-3{font-size:1.75rem!important}.fs-4{font-size:1.5rem!important}}@media print{.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-grid{display:grid!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}.d-print-none{display:none!important}} -/*# sourceMappingURL=bootstrap.min.css.map */ \ No newline at end of file diff --git a/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css.map b/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css.map deleted file mode 100644 index afcd9e3..0000000 --- a/Diagram/Server/wwwroot/css/bootstrap/bootstrap.min.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["../../scss/bootstrap.scss","../../scss/_root.scss","../../scss/_reboot.scss","dist/css/bootstrap.css","../../scss/vendor/_rfs.scss","../../scss/mixins/_border-radius.scss","../../scss/_type.scss","../../scss/mixins/_lists.scss","../../scss/_images.scss","../../scss/mixins/_image.scss","../../scss/_containers.scss","../../scss/mixins/_container.scss","../../scss/mixins/_breakpoints.scss","../../scss/_grid.scss","../../scss/mixins/_grid.scss","../../scss/_tables.scss","../../scss/mixins/_table-variants.scss","../../scss/forms/_labels.scss","../../scss/forms/_form-text.scss","../../scss/forms/_form-control.scss","../../scss/mixins/_transition.scss","../../scss/mixins/_gradients.scss","../../scss/forms/_form-select.scss","../../scss/forms/_form-check.scss","../../scss/forms/_form-range.scss","../../scss/forms/_floating-labels.scss","../../scss/forms/_input-group.scss","../../scss/mixins/_forms.scss","../../scss/_buttons.scss","../../scss/mixins/_buttons.scss","../../scss/_transitions.scss","../../scss/_dropdown.scss","../../scss/mixins/_caret.scss","../../scss/_button-group.scss","../../scss/_nav.scss","../../scss/_navbar.scss","../../scss/_card.scss","../../scss/_accordion.scss","../../scss/_breadcrumb.scss","../../scss/_pagination.scss","../../scss/mixins/_pagination.scss","../../scss/_badge.scss","../../scss/_alert.scss","../../scss/mixins/_alert.scss","../../scss/_progress.scss","../../scss/_list-group.scss","../../scss/mixins/_list-group.scss","../../scss/_close.scss","../../scss/_toasts.scss","../../scss/_modal.scss","../../scss/mixins/_backdrop.scss","../../scss/_tooltip.scss","../../scss/mixins/_reset-text.scss","../../scss/_popover.scss","../../scss/_carousel.scss","../../scss/mixins/_clearfix.scss","../../scss/_spinners.scss","../../scss/_offcanvas.scss","../../scss/_placeholders.scss","../../scss/helpers/_colored-links.scss","../../scss/helpers/_ratio.scss","../../scss/helpers/_position.scss","../../scss/helpers/_stacks.scss","../../scss/helpers/_visually-hidden.scss","../../scss/mixins/_visually-hidden.scss","../../scss/helpers/_stretched-link.scss","../../scss/helpers/_text-truncation.scss","../../scss/mixins/_text-truncate.scss","../../scss/helpers/_vr.scss","../../scss/mixins/_utilities.scss","../../scss/utilities/_api.scss"],"names":[],"mappings":"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","sourcesContent":["/*!\n * Bootstrap v5.1.0 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n\n// scss-docs-start import-stack\n// Configuration\n@import \"functions\";\n@import \"variables\";\n@import \"mixins\";\n@import \"utilities\";\n\n// Layout & components\n@import \"root\";\n@import \"reboot\";\n@import \"type\";\n@import \"images\";\n@import \"containers\";\n@import \"grid\";\n@import \"tables\";\n@import \"forms\";\n@import \"buttons\";\n@import \"transitions\";\n@import \"dropdown\";\n@import \"button-group\";\n@import \"nav\";\n@import \"navbar\";\n@import \"card\";\n@import \"accordion\";\n@import \"breadcrumb\";\n@import \"pagination\";\n@import \"badge\";\n@import \"alert\";\n@import \"progress\";\n@import \"list-group\";\n@import \"close\";\n@import \"toasts\";\n@import \"modal\";\n@import \"tooltip\";\n@import \"popover\";\n@import \"carousel\";\n@import \"spinners\";\n@import \"offcanvas\";\n@import \"placeholders\";\n\n// Helpers\n@import \"helpers\";\n\n// Utilities\n@import \"utilities/api\";\n// scss-docs-end import-stack\n",":root {\n // Note: Custom variable values only support SassScript inside `#{}`.\n\n // Colors\n //\n // Generate palettes for full colors, grays, and theme colors.\n\n @each $color, $value in $colors {\n --#{$variable-prefix}#{$color}: #{$value};\n }\n\n @each $color, $value in $grays {\n --#{$variable-prefix}gray-#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors {\n --#{$variable-prefix}#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors-rgb {\n --#{$variable-prefix}#{$color}-rgb: #{$value};\n }\n\n --#{$variable-prefix}white-rgb: #{to-rgb($white)};\n --#{$variable-prefix}black-rgb: #{to-rgb($black)};\n --#{$variable-prefix}body-rgb: #{to-rgb($body-color)};\n\n // Fonts\n\n // Note: Use `inspect` for lists so that quoted items keep the quotes.\n // See https://github.com/sass/sass/issues/2383#issuecomment-336349172\n --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};\n --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};\n --#{$variable-prefix}gradient: #{$gradient};\n\n // Root and body\n // stylelint-disable custom-property-empty-line-before\n // scss-docs-start root-body-variables\n @if $font-size-root != null {\n --#{$variable-prefix}root-font-size: #{$font-size-root};\n }\n --#{$variable-prefix}body-font-family: #{$font-family-base};\n --#{$variable-prefix}body-font-size: #{$font-size-base};\n --#{$variable-prefix}body-font-weight: #{$font-weight-base};\n --#{$variable-prefix}body-line-height: #{$line-height-base};\n --#{$variable-prefix}body-color: #{$body-color};\n @if $body-text-align != null {\n --#{$variable-prefix}body-text-align: #{$body-text-align};\n }\n --#{$variable-prefix}body-bg: #{$body-bg};\n // scss-docs-end root-body-variables\n // stylelint-enable custom-property-empty-line-before\n}\n","// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n\n// Root\n//\n// Ability to the value of the root font sizes, affecting the value of `rem`.\n// null by default, thus nothing is generated.\n\n:root {\n @if $font-size-root != null {\n font-size: var(--#{$variable-prefix}-root-font-size);\n }\n\n @if $enable-smooth-scroll {\n @media (prefers-reduced-motion: no-preference) {\n scroll-behavior: smooth;\n }\n }\n}\n\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Prevent adjustments of font size after orientation changes in iOS.\n// 4. Change the default tap highlight to be completely transparent in iOS.\n\n// scss-docs-start reboot-body-rules\nbody {\n margin: 0; // 1\n font-family: var(--#{$variable-prefix}body-font-family);\n @include font-size(var(--#{$variable-prefix}body-font-size));\n font-weight: var(--#{$variable-prefix}body-font-weight);\n line-height: var(--#{$variable-prefix}body-line-height);\n color: var(--#{$variable-prefix}body-color);\n text-align: var(--#{$variable-prefix}body-text-align);\n background-color: var(--#{$variable-prefix}body-bg); // 2\n -webkit-text-size-adjust: 100%; // 3\n -webkit-tap-highlight-color: rgba($black, 0); // 4\n}\n// scss-docs-end reboot-body-rules\n\n\n// Content grouping\n//\n// 1. Reset Firefox's gray color\n// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field\n\nhr {\n margin: $hr-margin-y 0;\n color: $hr-color; // 1\n background-color: currentColor;\n border: 0;\n opacity: $hr-opacity;\n}\n\nhr:not([size]) {\n height: $hr-height; // 2\n}\n\n\n// Typography\n//\n// 1. Remove top margins from headings\n// By default, `

`-`

` all receive top and bottom margins. We nuke the top\n// margin for easier control within type scales as it avoids margin collapsing.\n\n%heading {\n margin-top: 0; // 1\n margin-bottom: $headings-margin-bottom;\n font-family: $headings-font-family;\n font-style: $headings-font-style;\n font-weight: $headings-font-weight;\n line-height: $headings-line-height;\n color: $headings-color;\n}\n\nh1 {\n @extend %heading;\n @include font-size($h1-font-size);\n}\n\nh2 {\n @extend %heading;\n @include font-size($h2-font-size);\n}\n\nh3 {\n @extend %heading;\n @include font-size($h3-font-size);\n}\n\nh4 {\n @extend %heading;\n @include font-size($h4-font-size);\n}\n\nh5 {\n @extend %heading;\n @include font-size($h5-font-size);\n}\n\nh6 {\n @extend %heading;\n @include font-size($h6-font-size);\n}\n\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `

`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-bs-original-title] { // 1\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n text-decoration-skip-ink: none; // 4\n}\n\n\n// Address\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\n\n// Lists\n\nol,\nul {\n padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // 1\n}\n\n\n// Blockquote\n\nblockquote {\n margin: 0 0 1rem;\n}\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n font-weight: $font-weight-bolder;\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n padding: $mark-padding;\n background-color: $mark-bg;\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n position: relative;\n @include font-size($sub-sup-font-size);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n\n &:hover {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n &,\n &:hover {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-code;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n direction: ltr #{\"/* rtl:ignore */\"};\n unicode-bidi: bidi-override;\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don't allow content to break outside\n\npre {\n display: block;\n margin-top: 0; // 1\n margin-bottom: 1rem; // 2\n overflow: auto; // 3\n @include font-size($code-font-size);\n color: $pre-color;\n\n // Account for some code outputs that place code tags in pre tags\n code {\n @include font-size(inherit);\n color: inherit;\n word-break: normal;\n }\n}\n\ncode {\n @include font-size($code-font-size);\n color: $code-color;\n word-wrap: break-word;\n\n // Streamline the style when inside anchors to avoid broken underline and more\n a > & {\n color: inherit;\n }\n}\n\nkbd {\n padding: $kbd-padding-y $kbd-padding-x;\n @include font-size($kbd-font-size);\n color: $kbd-color;\n background-color: $kbd-bg;\n @include border-radius($border-radius-sm);\n\n kbd {\n padding: 0;\n @include font-size(1em);\n font-weight: $nested-kbd-font-weight;\n }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n vertical-align: middle;\n}\n\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n caption-side: bottom;\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: $table-cell-padding-y;\n padding-bottom: $table-cell-padding-y;\n color: $table-caption-color;\n text-align: left;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `` alignment by inheriting `text-align`.\n// 3. Fix alignment for Safari\n\nth {\n font-weight: $table-th-font-weight; // 1\n text-align: inherit; // 2\n text-align: -webkit-match-parent; // 3\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n border-color: inherit;\n border-style: solid;\n border-width: 0;\n}\n\n\n// Forms\n//\n// 1. Allow labels to use `margin` for spacing.\n\nlabel {\n display: inline-block; // 1\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n// See https://github.com/twbs/bootstrap/issues/24093\n\nbutton {\n // stylelint-disable-next-line property-disallowed-list\n border-radius: 0;\n}\n\n// Explicitly remove focus outline in Chromium when it shouldn't be\n// visible (e.g. as result of mouse click or touch tap). It already\n// should be doing this automatically, but seems to currently be\n// confused and applies its very visible two-tone outline anyway.\n\nbutton:focus:not(:focus-visible) {\n outline: 0;\n}\n\n// 1. Remove the margin in Firefox and Safari\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n margin: 0; // 1\n font-family: inherit;\n @include font-size(inherit);\n line-height: inherit;\n}\n\n// Remove the inheritance of text transform in Firefox\nbutton,\nselect {\n text-transform: none;\n}\n// Set the cursor for non-`