Rendimiento

Tablero con cientos de cajas y relaciones. Arrastre, redimensione y desplace: todo ocurre en el navegador y solo se llama a .NET al soltar.

1. Cientos de cajas

Elija 100, 500 o 1000 cajas, cada una relacionada con la siguiente.

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;