Performance

Board with hundreds of boxes and relations. Drag, resize and scroll: everything happens in the browser and .NET is only called on release.

1. Hundreds of boxes

Choose 100, 500 or 1000 boxes, each one related to the next.

100 boxes500 boxes1000 boxes

100%

#10

#11

#12

#13

#14

#15

#16

#17

#18

#19

#20

#21

#22

#23

#24

#25

#26

#27

#28

#29

#30

#31

#32

#33

#34

#35

#36

#37

#38

#39

#40

#41

#42

#43

#44

#45

#46

#47

#48

#49

#50

#51

#52

#53

#54

#55

#56

#57

#58

#59

#60

#61

#62

#63

#64

#65

#66

#67

#68

#69

#70

#71

#72

#73

#74

#75

#76

#77

#78

#79

#80

#81

#82

#83

#84

#85

#86

#87

#88

#89

#90

#91

#92

#93

#94

#95

#96

#97

#98

#99

#100

#101

#102

#103

#104

#105

#106

#107

#108

#109

#110

#111

#112

#113

#114

#115

#116

#117

#118

#119

#120

#121

#122

#123

#124

#125

#126

#127

#128

#129

#130

#131

#132

#133

#134

#135

#136

#137

#138

#139

#140

#141

#142

#143

#144

#145

#146

#147

#148

#149

#150

#151

#152

#153

#154

#155

#156

#157

#158

#159

#160

#161

#162

#163

#164

#165

#166

#167

#168

#169

#170

#171

#172

#173

#174

#175

#176

#177

#178

#179

#180

#181

#182

#183

#184

#185

#186

#187

#188

#189

#190

#191

#192

#193

#194

#195

#196

#197

#198

#199

#200

#201

#202

#203

#204

#205

#206

#207

#208

#209

#210

#211

#212

#213

#214

#215

#216

#217

#218

#219

#220

#221

#222

#223

#224

#225

#226

#227

#228

#229

#230

#231

#232

#233

#234

#235

#236

#237

#238

#239

#240

#241

#242

#243

#244

#245

#246

#247

#248

#249

#250

#251

#252

#253

#254

#255

#256

#257

#258

#259

#260

#261

#262

#263

#264

#265

#266

#267

#268

#269

#270

#271

#272

#273

#274

#275

#276

#277

#278

#279

#280

#281

#282

#283

#284

#285

#286

#287

#288

#289

#290

#291

#292

#293

#294

#295

#296

#297

#298

#299

#300

#301

#302

#303

#304

#305

#306

#307

#308

#309

#310

#311

#312

#313

#314

#315

#316

#317

#318

#319

#320

#321

#322

#323

#324

#325

#326

#327

#328

#329

#330

#331

#332

#333

#334

#335

#336

#337

#338

#339

#340

#341

#342

#343

#344

#345

#346

#347

#348

#349

#350

#351

#352

#353

#354

#355

#356

#357

#358

#359

#360

#361

#362

#363

#364

#365

#366

#367

#368

#369

#370

#371

#372

#373

#374

#375

#376

#377

#378

#379

#380

#381

#382

#383

#384

#385

#386

#387

#388

#389

#390

#391

#392

#393

#394

#395

#396

#397

#398

#399

#400

#401

#402

#403

#404

#405

#406

#407

#408

#409

#410

#411

#412

#413

#414

#415

#416

#417

#418

#419

#420

#421

#422

#423

#424

#425

#426

#427

#428

#429

#430

#431

#432

#433

#434

#435

#436

#437

#438

#439

#440

#441

#442

#443

#444

#445

#446

#447

#448

#449

#450

#451

#452

#453

#454

#455

#456

#457

#458

#459

#460

#461

#462

#463

#464

#465

#466

#467

#468

#469

#470

#471

#472

#473

#474

#475

#476

#477

#478

#479

#480

#481

#482

#483

#484

#485

#486

#487

#488

#489

#490

#491

#492

#493

#494

#495

#496

#497

#498

#499

#500

@using Astrol.Component.Board

@using Astrol.Component.Basic.Form

@using Astrol.Entities.Basic.UI.Board

@* Large board: dragging, resizing and moving vertices run in the browser (no calls to .NET while you drag),

 so it stays smooth with hundreds of boxes. Only the boxes that change are rendered again. *@

<div style="margin-bottom:5px">

 <AstrolRadioGroup Value="boxCount" ValueChanged="(int count) => Load(count)" Horizontal="true" AriaLabel="Boxes">

 @foreach (var count in new[] { 100, 500, 1000 })

 <AstrolRadio Value="count" Text="@($"{count} boxes")" />

 </AstrolRadioGroup>

</div>

<div style="height:420px">

 <AstrolBoard TBox="string" TRelation="object" Board="board" BackgroundType="BackgroundType.Points" MinWidth="40" MinHeight="30">

 <BoxRender>

 <div style="height:100%; display:flex; align-items:center; justify-content:center; font-size:.8em; border-radius:6px; border:1px solid var(--color-gray-a); background:var(--layout-menu-bg)">

 @context.BOX_NAME

 </div>

 </BoxRender>

 </AstrolBoard>

</div>

@code {

 private int boxCount = 500;

 private Board<string, object> board = Create(500);

 // A new Board object: the component starts again (selection and history).

 private void Load(int count)

 boxCount = count;

 board = Create(count);

 private static Board<string, object> Create(int count)

 var b = new Board<string, object>();

 for (int i = 0; i < count; i++)

 b.Boxes.Add(new Box<string> { X = 20 + (i % 25) * 120, Y = 20 + (i / 25) * 100, Width = 90, Height = 60, BOX_NAME = $"#{i + 1}", Content = "" });

 for (int i = 1; i < count; i++)

 b.Relations.Add(new Relation<object> { BoxIdA = b.Boxes[i - 1].Id, BoxIdB = b.Boxes[i].Id });

 return b;