STNodeEditor/docs/tutorials_en.html at 2.0 · DebugST/STNodeEditor

History

1228 lines (1226 loc) · 144 KB

Raw

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

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

742

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

792

793

794

795

796

797

798

799

800

801

802

803

804

805

806

807

808

809

810

811

812

813

814

815

816

817

818

819

820

821

822

823

824

825

826

827

828

829

830

831

832

833

834

835

836

837

838

839

840

841

842

843

844

845

846

847

848

849

850

851

852

853

854

855

856

857

858

859

860

861

862

863

864

865

866

867

868

869

870

871

872

873

874

875

876

877

878

879

880

881

882

883

884

885

886

887

888

889

890

891

892

893

894

895

896

897

898

899

900

901

902

903

904

905

906

907

908

909

910

911

912

913

914

915

916

917

918

919

920

921

922

923

924

925

926

927

928

929

930

931

932

933

934

935

936

937

938

939

940

941

942

943

944

945

946

947

948

949

950

951

952

953

954

955

956

957

958

959

960

961

962

963

964

965

966

967

968

969

970

971

972

973

974

975

976

977

978

979

980

981

982

983

984

985

986

987

988

989

990

991

992

993

994

995

996

997

998

999

1000

<!DOCTYPE html>

<html>

<head>

<title>STNodeEditor - Tutorials</title>

</head>

<body>

<li>

<a class='a_node_root anchor_btn' anchor='a_a'>Foreword</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_b'>Introduction</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='a_c'>[Basic]STNode</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_d'>Create Node</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_e'>STNodeOption</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_f'>STNodeOption.Empty</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_g'>STNode.AutoSize</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_h'>e.g. - ClockNode</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_i'>STNode.SetOptionXXX</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_j'>About TransferData</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_k'>STNodeHub</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='a_l'>[basic]STNodeControl</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_m'>add a control</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_n'>Customize a Button</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_o'>e.g. - Image info</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='a_p'>[basic]STNodeEditor</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_q'>Save canvas</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_r'>Load canvas</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_s'>useful event</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_t'>useful function</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='a_u'>STNodePropertyGrid</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_w'>STNodePropertyAttribute</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_x'>STNodeAttribute</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='a_z'>e.g. - Add number</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_a'>ReadOnlyModel</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='b_b'>STNodePropertyDescriptor</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_c'>e.g. - ColorTestNode</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_d'>about properoty discriptor</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_e'>GetValueFromString()</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_f'>GetStringFromValue()</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_g'>e.g. - ColorTestNode</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_h'>e.g. - ColorTestNode</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='b_i'>STNodeTreeView</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_k'>Load assembly</a></li>

</ul>

</li>

<li>

<a class='a_node_root anchor_btn' anchor='b_l'>Save nodes</a>

<ul>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_n'>OnSaveNode(dic)</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_o'>GetBytesFromValue()</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_p'>OnLoadNode(dic)</a></li>

<li class='li_node_sub'><a class='anchor_btn' anchor='b_q'>OnEditorLoadCompleted</a></li>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>2021-04-29

</div>

<h1 class='h_title anchor_point' anchor='a_a'>Foreword</h1>

<div><h2 class='h_option anchor_point' anchor='a_b'>Introduction</h2></div>

It was a winter. The author who was studying radio security used <a target='_bank' href='https://www.gnuradio.org/'>GNURadio</a>. That was the first time the author used the node editor.

-> What? Excuse me... What"s this?.. What the hell is this?...

It was a spring season, and I don"t know why the whole world has changed after the Chinese New Year. Everyone was forced to stay at home. The extremely boring author learned <a target='_bank' href='https://www.blender.org/'>Blender</a>. That was the second time the author used the node editor.

-> Wo...It turns out that this one is really convenient to use.

So some ideas gradually emerged in the author"s mind, making the author want to make one.

It was a summer, I don’t know why the author started to learn <a target='_bank' href='http://www.blackmagicdesign.com/cn/products/davinciresolve/'>Davinci</a> again. That was the third time the author used the node editor. The use of this time has doubled the author"s favor with the node editor. The author instantly felt that as long as it is a program that can be modularized and streamlined, everything can be nodeized.

So STNodeEditor appeared.

<hr/>

<h1 class='h_title anchor_point' anchor='a_c'>[Basic]STNode</h1>

STNode is the core of the whole framework. If STNodeEditor is regarded as Desktop, then an STNode can be regarded as an application on the desktop. It is very necessary to develop a strong STNode.

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_d'>Create Node</h2></div>

<hr/>

The base class STNode of the node is modified by abstract, so the node must be extended to STNode

STNode contains a large number of virtual functions for developers to overload. For more information, please refer to <a target='_bank' href='./doc.html'>API Documentation</a>

<pre class='pre_code'>using ST.Library.UI.NodeEditor;

namespace WinNodeEditorDemo

{

public class MyNode : STNode

{

public MyNode() { //Equivalent to OnCreate()

this.Title = "TestNode";

}

//protected override void OnCreate() {

// base.OnCreate();

//}

}

}

//Add to STNodeEditor

stNodeEditor1.Nodes.Add(new MyNode());</pre>

</div>

You will find that you only see a title and nothing. Because no input and output options are added to it, let's add some code.

<pre class='pre_code'>public class MyNode : STNode

{

protected override void OnCreate() {

base.OnCreate();

this.Title = "TestNode";

//get the index of STNodeOption that added

int nIndex = this.InputOptions.Add(new STNodeOption("IN_1", typeof(string), false));

//get the STNodeOption that added

STNodeOption op = this.InputOptions.Add("IN_2", typeof(int), true);

this.OutputOptions.Add("OUT", typeof(string), false);

}

}</pre>

</div>

In this way, the added option will be displayed on the node, but this is not enough. You can see that there are two data types string and int. Color should be added to the data type to distinguish different data types.

{

protected override void OnCreate() {

base.OnCreate();

this.Title = "TestNode";

//The highest priority, the color information in the container will be ignored

//this.SetOptionDotColor(op, Color.Red);

}

//Occurs when the owner changes, submit the color

protected override void OnOwnerChanged() {

base.OnOwnerChanged();

if (this.Owner == null) return;

this.Owner.SetTypeColor(typeof(string), Color.Yellow);

//will replace old color

this.Owner.SetTypeColor(typeof(int), Color.DodgerBlue, true);

}

}</pre>

</div>

Such a node is created, but this node does not have any functions. In the next case, functions will be added.

In any case, developers should try to keep an empty parameter constructor for the extended STNode, otherwise there will be unnecessary troubles in many functions.

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_e'>STNodeOption</h2></div>

<hr/>

From the above case, we can see that STNodeOption is the connection option of STNode. The connection option can be multi-connection and single-connection mode.

protected override void OnCreate() {

base.OnCreate();

this.Title = "MyNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

//multi-connection

this.InputOptions.Add("Single", typeof(string), true);

//single-connection

this.OutputOptions.Add("Multi", typeof(string), false);

}

}</pre>

</div>

In multi-connection mode, an option can be connected by multiple options of the same data type (rectangle)

In single-connection mode, an option can only be connected by one option of the same data type (circle)

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_f'>STNodeOption.Empty</h2></div>

<hr/>

STNodeOption.Empty is a static property, added to STNode is only used to occupy a place during auto layout.

protected override void OnCreate() {

base.OnCreate();

this.Title = "MyNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

this.InputOptions.Add(STNodeOption.Empty);

this.InputOptions.Add("IN_1", typeof(string), false);

this.InputOptions.Add("IN_2", typeof(string), false);

this.OutputOptions.Add("OUT_1", typeof(string), false);

this.OutputOptions.Add(STNodeOption.Empty);

this.OutputOptions.Add("OUT_2", typeof(string), false);

}

}</pre>

</div>

a STNodeOption height can set by STNode.ItemHeight(protected)

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_g'>STNode.AutoSize</h2></div>

<hr/>

AutoSizedefault value istrue,when AitoSize is set WidthHeightcan not be set

protected override void OnCreate() {

base.OnCreate();

this.Title = "MyNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

this.InputOptions.Add("IN", typeof(string), false);

//you should close AutoSize Model before you set the node size

this.AutoSize = false;

this.Size = new Size(100, 100);

}

}</pre>

</div>

You can see that the size of MyNode is no longer automatically calculated, but the position of STNodeOption will still be automatically calculated. If you want to modify the position of STNodeOption, you can override OnSetOptionXXX

{

private STNodeOption m_op_in;

private STNodeOption m_op_out;

protected override void OnCreate() {

base.OnCreate();

this.Title = "MyNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

m_op_in = this.InputOptions.Add("IN", typeof(string), false);

m_op_out = this.OutputOptions.Add("OUT", typeof(string), false);

this.AutoSize = false;

this.Size = new Size(100, 100);

}

//you can set the location of STNodeOption when the AutoSize is true

protected override Point OnSetOptionDotLocation(STNodeOption op, Point pt, int nIndex) {

if (op == m_op_in) return new Point(pt.X, pt.Y + 20);

return base.OnSetOptionDotLocation(op, pt, nIndex);

}

//you can set the rectangle of STNodeOption when the AutoSize is true

protected override Rectangle OnSetOptionTextRectangle(STNodeOption op, Rectangle rect, int nIndex) {

if (op == m_op_out) return new Rectangle(rect.X, rect.Y + 20, rect.Width, rect.Height);

return base.OnSetOptionTextRectangle(op, rect, nIndex);

}

}</pre>

</div>

You can see that in the code, the point and text area of the STNodeOption connection line are modified by overloading the function. Why is it not designed to be STNodeOption.DotLeft=xxx because the author thinks it will be more troublesome.

The pt and rect passed in the overloaded function are all automatically calculated data so that the developer will have a certain reference when modifying the position. If the method is STNodeOption.DotLeft=xxx, the developer cannot Obtaining a reference position requires all calculations by yourself

It also needs to bind events such as STNode.Resize to monitor the changes in the size of STNode to recalculate the position, so the OnSetOptionXXX method is more friendly in comparison.

All instances currently have no functions. In the next cases, functions will be added.

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_h'>e.g. - ClockNode</h2></div>

<hr/>

STNodeOption can get all the data input of this option by binding to the DataTransfer event

STNodeOption.TransferData(object) function can transfer data to all connections on this option

Next, implement a functional node. The best example for now is to create a clock node.

Because the content introduced so far is not enough to be able to freely provide arbitrary data to nodes, a node that can generate data by itself is needed.

The node outputs the current system time every second

<pre class='pre_code'>public class ClockNode : STNode

{

private Thread m_thread;

private STNodeOption m_op_out_time;

protected override void OnCreate() {

base.OnCreate();

this.Title = "ClockNode";

m_op_out_time = this.OutputOptions.Add("Time", typeof(DateTime), false);

}

//when the owner changed

protected override void OnOwnerChanged() {

base.OnOwnerChanged();

if (this.Owner == null) { //when the owner is null abort thread

if (m_thread != null) m_thread.Abort();

return;

}

this.Owner.SetTypeColor(typeof(DateTime), Color.DarkCyan);

m_thread = new Thread(() => {

while (true) {

Thread.Sleep(1000);

//STNodeOption.TransferData(object) will automatically post data to all connections on the option

//STNodeOption.TransferData(object) will set STNodeOption.Data automatically

m_op_out_time.TransferData(DateTime.Now);

//if you need to operate across UI threads in a thread, the node provides Begin/Invoke() to complete the operation.

//this.BeginInvoke(new MethodInvoker(() => m_op_out_time.TransferData(DateTime.Now)));

}

}) { IsBackground = true };

m_thread.Start();

}

}</pre>

</div>

Of course, we can directly display the time of the above node, but in order to demonstrate the data transfer, we also need a node that accepts the data

<pre class='pre_code'>public class ShowClockNode : STNode {

private STNodeOption m_op_time_in;

protected override void OnCreate() {

base.OnCreate();

this.Title = "ShowTime";

//use "single-connection" model

m_op_time_in = this.InputOptions.Add("--", typeof(DateTime), true);

//This event is triggered when data is transferred to m_op_time_in

m_op_time_in.DataTransfer += new STNodeOptionEventHandler(op_DataTransfer);

}

void op_DataTransfer(object sender, STNodeOptionEventArgs e) {

//This event is not only triggered when there is data coming in.

//This event is also triggered when there is a connection or disconnection,

//so you need to check the connection status.

if (e.Status != ConnectionStatus.Connected || e.TargetOption.Data == null) {

//When STNode.AutoSize=true, it is not recommended to use STNode.SetOptionText

//the STNode will recalculate the layout every time the Text changes.

//It should be displayed by adding controls.

//Since STNodeControl has not yet been mentioned, the current design will be used for now.

this.SetOptionText(m_op_time_in, "--");

} else {

this.SetOptionText(m_op_time_in, ((DateTime)e.TargetOption.Data).ToString());

}

}</pre>

</div>

add to STNodeEditor

You can see that ShowClockNode is refreshing every second

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_i'>STNode.SetOptionXXX</h2></div>

<hr/>

In the above and previous examples, we can see that when some properties of STNodeOption need to be modified, they are not modified in the way of STNodeOption.XXX=XXX. This design is for safety.

The author thinks that STNodeOption can only be modified by its owner, and the method of STNodeOption.XXX=XXX cannot know who modified it and STNode.SetOptionXXX() is marked by protected only internally Is called and inside the function will check whether STNodeOption.Owner is the current class

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_j'>About TransferData</h2></div>

<hr/>

It is not necessary to STNodeOption.TransferData(object) to transfer data. TransferData(object) only actively updates data

When a new connection is successful, the DataTransfer event will also be triggered, the following will modify the code of ClockNode

{

private Thread m_thread;

private STNodeOption m_op_out_time;

protected override void OnCreate() {

base.OnCreate();

this.Title = "ClockNode";

//Assign value to option data

m_op_out_time.Data = DateTime.Now;

}

}</pre>

</div>

You can see that ShowClockNode still shows the time but the data does not change because the DataTransfer event will be triggered when the connection is successful. In the event, ShowClockNode gets the data of the ClockNode option through e.TargetOption.Data

When a connection is successful and disconnected, the event trigger sequence is as follows

Connecting-Connected-DataTransfer | DisConnecting-DataTransfer-DisConnected

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_k'>STNodeHub</h2></div>

<hr/>

STNodeHub is a built-in node that can disperse one output to multiple inputs or concentrate multiple outputs on one input point to prevent repeated connections. It can also be used for layout when the node connection is complicated.

<h1 class='h_title anchor_point' anchor='a_l'>[basic]STNodeControl</h1>

As the base class of STNode control, STNodeControl has many properties and events with the same name as System.Windows.Forms.Control, allowing developers to develop a node like a WinForm program.

In this version (2.0), no available control is provided. Only the STNodeControl base class needs to be extended by the developer. If available later, the author will improve it.

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_m'>add a control</h2></div>

<hr/>

Same as System.Windows.Forms.Control STNode has the Controls collection and its data type is STNodeControl

{

protected override void OnCreate() {

base.OnCreate();

this.Title = "MyNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

this.AutoSize = false;

this.Size = new Size(100, 100);

var ctrl = new STNodeControl();

ctrl.Text = "Button";

ctrl.Location = new Point(10, 10);

this.Controls.Add(ctrl);

ctrl.MouseClick += new MouseEventHandler(ctrl_MouseClick);

}

void ctrl_MouseClick(object sender, MouseEventArgs e) {

MessageBox.Show("MouseClick");

}

}</pre>

</div>

You can see that there is almost no difference between developing a WinForm program. The only difference is that STNode does not yet provide a WYSIWYG UI designer.

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_n'>Customize a Button</h2></div>

<hr/>

Although the above code looks like it adds a button control, in fact it is just the default drawing style of STNodeControl

The following is to customize a Button control with mouse hovering and clicking effects to make it more like a button

<pre class='pre_code'>public class STNodeButton : STNodeControl {

private bool m_b_enter;

private bool m_b_down;

protected override void OnMouseEnter(EventArgs e) {

base.OnMouseEnter(e);

m_b_enter = true;

this.Invalidate();

}

protected override void OnMouseLeave(EventArgs e) {

base.OnMouseLeave(e);

m_b_enter = false;

this.Invalidate();

}

protected override void OnMouseDown(MouseEventArgs e) {

base.OnMouseDown(e);

m_b_down = true;

this.Invalidate();

}

protected override void OnMouseUp(MouseEventArgs e) {

base.OnMouseUp(e);

m_b_down = false;

this.Invalidate();

}

protected override void OnPaint(DrawingTools dt) {

//base.OnPaint(dt);

Graphics g = dt.Graphics;

SolidBrush brush = dt.SolidBrush;

brush.Color = base.BackColor;

if (m_b_down) brush.Color = Color.SkyBlue;

else if (m_b_enter) brush.Color = Color.DodgerBlue;

g.FillRectangle(brush, 0, 0, this.Width, this.Height);

g.DrawString(this.Text, this.Font, Brushes.White, this.ClientRectangle, base.m_sf);

}

}</pre>

</div>

Of course, in order to make the code as simple as possible, the effect of the button is written in the code. The above code is just to demonstrate how to build a custom control. Of course, you need to have some GDI related knowledge before this.

<GDI+Programming> is a good book

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_o'>e.g. - Image info</h2></div>

<hr/>

In the above ClockNode case, the data for the data is written in the node through code. Next, in this case, the data is obtained through the STNodeButton for output.

<pre class='pre_code'>public class ImageShowNode : STNode

{

private STNodeOption m_op_out;

protected override void OnCreate() {

base.OnCreate();

this.Title = "ImageShowNode";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

this.AutoSize = false;

this.Size = new Size(160, 150);

m_op_out = this.OutputOptions.Add("", typeof(Image), false);

var ctrl = new STNodeButton();

ctrl.Text = "Open Image";

ctrl.Location = new Point(5, 0);

ctrl.Size = new Size(150, 20);

this.Controls.Add(ctrl);

ctrl.MouseClick += new MouseEventHandler(ctrl_MouseClick);

}

void ctrl_MouseClick(object sender, MouseEventArgs e) {

OpenFileDialog ofd = new OpenFileDialog();

ofd.Filter = "*.png|*.png|*.jpg|*.jpg";

if (ofd.ShowDialog() != DialogResult.OK) return;

m_op_out.TransferData(Image.FromFile(ofd.FileName), true);

this.Invalidate();

}

protected override void OnDrawBody(DrawingTools dt) {

base.OnDrawBody(dt);

//of course you can extended STNodeControl to build a "STNodePictureBox" for display image

Graphics g = dt.Graphics;

Rectangle rect = new Rectangle(this.Left + 5, this.Top + this.TitleHeight + 20, 150, 105);

g.FillRectangle(Brushes.Gray, rect);

if (m_op_out.Data != null)

g.DrawImage((Image)m_op_out.Data, rect);

}

}</pre>

</div>

Now we need a node to get image size.

<pre class='pre_code'>public class ImageSizeNode : STNode {

private STNodeOption m_op_in;

protected override void OnCreate() {

base.OnCreate();

this.Title = "ImageSize";

this.TitleColor = Color.FromArgb(200, Color.Goldenrod);

m_op_in = this.InputOptions.Add("--", typeof(Image), true);

m_op_in.DataTransfer += new STNodeOptionEventHandler(m_op_in_DataTransfer);

}

void m_op_in_DataTransfer(object sender, STNodeOptionEventArgs e) {

this.SetOptionText(m_op_in, "--");

} else {

Image img = (Image)e.TargetOption.Data;

this.SetOptionText(m_op_in, "W:" + img.Width + " H:" + img.Height);

}

}</pre>

</div>

clickthe Open Image button, you can select an image and display it in the node. After the ImageSizeNode is connected, the size of the image will be display.

The code of the ImageChannel node is not given here. The code is used in the WinNodeEditorDemo project to extract the RGB channel of an image. For ImageShowNode, it just provides the data source and displays it. For the ImageSizeNode and ImageChannel nodes, they don"t know what node will be connected. They just complete their functions and package the results to the output option, waiting to be connected by the next node

The execution logic is completely connected by the user to connect their functions together. During the development, there is no interaction between nodes and nodes. The only thing that ties them together is an Image data type, so that nodes and nodes There is no coupling relationship between them. High class poly low coupling.

<h1 class='h_title anchor_point' anchor='a_p'>[basic]STNodeEditor</h1>

STNodeEditor as a container of STNode also provides a large number of properties and events for developers to use. For more detailed API list of STNodeEditor, please refer to <a target='_bank' href='./doc.html'>API document</a>

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_q'>Save canvas</h2></div>

<hr/>

The relationship between nodes and connections in STNodeEditor can be saved to a file

The contents of the canvas can be saved to a file through the STNodeEditor.SaveCanvas(string strFileName) function

Note that the SaveCanvas() function will call the internal byte[] STNode.GetSaveData() function to get the binary data of each node

The GetSaveData() function does not serialize the node itself. The GetSaveData() function binarizes the basic data and original attributes of the node itself and then calls virtual OnSaveNode(Dictionary<string, byte[]> dic) to The expansion node asks for the data that the node needs to save

If there is a saving requirement, the node developer may need to override the OnSaveNode() function to ensure that some required data can be saved

More content about saving nodes will be introduced in the following content

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_r'>Load canvas</h2></div>

<hr/>

The saved data can be loaded from the file through the STNodeEditor.LoadCanvas(string strFileName) function

If STNodeEditor has nodes in other assemblies, you need to load the assembly by calling STNodeEditor.LoadAssembly(string strFile) to ensure that the nodes in the file can be restored correctly

Because the restored node is not serialized, a node is dynamically created by (STNode)Activator.CreateInstance(stNodeType) and then called virtual OnSaveNode(Dictionary<string, byte[]> dic) to restore the data, while dic Is the data saved by OnSaveNode()

Because the restore node is dynamically created through reflection, an empty parameter constructor must be provided in the extended STNode

More content about saving nodes will be introduced in the following content

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_s'>useful event</h2></div>

<hr/>

ActiveChanged,SelectedChanged can monitor the selected changes of the node in the control

<pre class='pre_code'>stNodeEditor1.ActiveChanged += (s, e) => Console.WriteLine(stNodeEditor1.ActiveNode.Title);

stNodeEditor1.SelectedChanged += (s, e) => {

foreach(var n in stNodeEditor1.GetSelectedNode()){

Console.WriteLine(n.Title);

}

};</pre>

</div>

If you want to display the scale on the editor after each zoom of the canvas, you can get it through the CanvasScaled event

<pre class='pre_code'>stNodeEditor1.CanvasScaled += (s, e) => {

stNodeEditor1.ShowAlert(stNodeEditor1.CanvasScale.ToString("F2"),

Color.White, Color.FromArgb(127, 255, 255, 0));

};</pre>

</div>

If you want to display the connection status when there are nodes connected in the canvas, you can get the status through the OptionConnected event

<pre class='pre_code'>stNodeEditor1.OptionConnected += (s, e) => {

stNodeEditor1.ShowAlert(e.Status.ToString(), Color.White,

Color.FromArgb(125, e.Status ConnectionStatus.Connected ? Color.Lime : Color.Red));

};</pre>

</div>

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_t'>useful function</h2></div>

<hr/>

/// Move the origin position of the canvas to the specified control position

/// (cannot be moved when there is no Node)

/// </summary>

/// <param name="x">X</param>

/// <param name="y">Y</param>

/// <param name="bAnimation">use animation</param>

/// <param name="ma">Specify the position that needs to be modified</param>

public void MoveCanvas(float x, float y, bool bAnimation, CanvasMoveArgs ma);</pre>

</div>

<hr/>

/// Scale Canvas(cannot be moved when there is no Node)

/// </summary>

/// <param name="f">scale</param>

/// <param name="x">The position of the zoom center X on the control</param>

/// <param name="y">The position of the zoom center Y on the control</param>

public void ScaleCanvas(float f, float x, float y);</pre>

</div>

<hr/>

/// Add the default data type color to the editor

/// </summary>

/// <param name="t">data type</param>

/// <param name="clr">color</param>

/// <param name="bReplace">replace</param>

/// <returns>new color</returns>

public Color SetTypeColor(Type t, Color clr, bool bReplace);</pre>

</div>

<hr/>

/// Display information in the canvas

/// </summary>

/// <param name="strText">message text</param>

/// <param name="foreColor">fore color</param>

/// <param name="backColor">back color</param>

/// <param name="nTime">time</param>

/// <param name="al">message location</param>

/// <param name="bRedraw">redraw</param>

void ShowAlert(string strText, Color foreColor, Color backColor, int nTime, AlertLocation al, bool bRedraw);

//e.g.

stNodeEditor1.ShowAlert("this is test info", Color.White, Color.FromArgb(200, Color.Yellow));</pre>

</div>

For more propertyfunctioneventsofSTNodeEditor, please refer to <a target='_bank' href='./doc.html'>API document</a> This document pays more attention to the example of STNode

<h1 class='h_title anchor_point' anchor='a_u'>STNodePropertyGrid</h1>

STNodePropertyGrid is another control released with the class library and can be used with STNodeEditor

There are two panels in STNodePropertyGrid, which can be switched by the button on the top Property Panel and Node Information Panel.

Only include attribute or node information will display their panel

<hr/>

<hr/>

The core method of STNodePropertyGrid is SetNode(STNode) usually used with STNodeEditor

<pre class='pre_code'>stNodeEditor1.ActiveChanged += (s, e) => stNodePropertyGrid1.SetNode(stNodeEditor1.ActiveNode);</pre>

</div>

STNode is a class which of course can have properties, and STNodePropertyGrid is to display and modify them, just like what you see in the UI designer during the development of WinForm

Let"s try it

<pre class='pre_code'>public class PropertyTestNode : STNode {

private int _Number;

public int Number {

get { return _Number; }

set { _Number = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "PropertyTest";

}

}</pre>

</div>

You will find that the Number property is not displayed as you expected

The difference with System.Windows.Forms.PropertyGrid is that PropertyGrid will display all the properties in class while STNodePropertyGrid does not.

S T N O D E PropertyGrid This is STNodePropertyGrid and does not display a property casually, because the author thinks that the developer may not want all the properties in STNode to be displayed, even if it needs to be displayed, the developer may not want to display a property. What you see in the window is Number but a different name. After all, Number is used when writing code

Only property with the STNodePropertyAttribute feature added will be displayed in the STNodePropertyGrid

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_w'>STNodePropertyAttribute</h2></div>

<hr/>

STNodePropertyAttribute has three properties Name, Description and DescriptorType

Name-the name of this property that you want to display on STNodePropertyGrid

Description-The description you want to display when the left mouse button is long press the property name on STNodePropertyGrid

DescriptorType-Data interaction interface with properoty editor, this property will be mentioned later

The constructor of STNodePropertyAttribute is STNodePropertyAttribute(string strName,string strDescription)

{

private int _Number;

[STNodeProperty("Name", "Description for this property")]

public int Number {

get { return _Number; }

set { _Number = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "PropertyTest";

}

}</pre>

</div>

Now you can see that the property is displayed correctly and can be set, and long press the property name will display the description information

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_x'>STNodeAttribute</h2></div>

<hr/>

If you want to display node information, STNode needs to be marked with the STNodeAttribute feature

<pre class='pre_code'>[STNode("AA/BB", "Author", "Mail", "Link", "Description")]

public class PropertyTestNode : STNode

{

private int _Number;

[STNodeProperty("Name", "Description for this property")]

public int Number {

get { return _Number; }

set { _Number = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "PropertyTest";

}

}</pre>

</div>

You can switch between panels through the button in the top

The AA/BB is used to construct the path in STNodeTreeView

<pre class='pre_code'>stNodePropertyGrid1.SetInfoKey("Author", "Mail", "Link", "Show Help");</pre>

</div>

The key of the content of the Information Panel can be used to set the language through the SetInfoKey() function, which is displayed in simplified Chinese by default.

<hr/>

<hr/>

In the example of Information Panel, you can see that the Show Help button is not available. If you want it to be available, you need to provide a magic method

public class PropertyTestNode : STNode

{

private int _Number;

[STNodeProperty("Name", "Description for this property")]

public int Number {

get { return _Number; }

set { _Number = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "PropertyTest";

}

/// <summary>

/// This method is a magic method

/// If there is "static void ShowHelpInfo(string)" and this class is marked by "STNodeAttribute"

/// Then this method will be used as the "Show Help" function on the property editor

/// </summary>

/// <param name="strFileName">The file path of the module where this class is located.</param>

public static void ShowHelpInfo(string strFileName) {

MessageBox.Show("this is -> ShowHelpInfo(string);\r\n" + strFileName);

}

}</pre>

</div>

Now find that the Show Help button has become enabled. STNodeAttribute also provides two static functions.

/// Get help method for stNodeType

/// </summary>

/// <param name="stNodeType">stNodeType</param>

/// <returns>MethodInfo</returns>

public static MethodInfo GetHelpMethod(Type stNodeType);

/// <summary>

/// Excute the "ShowHelpInfo" for stNodeType

/// </summary>

/// <param name="stNodeType">节点类型</param>

public static void ShowHelp(Type stNodeType);</pre>

</div>

<hr/>

<div><h2 class='h_option anchor_point' anchor='a_z'>e.g. - Add number</h2></div>

<hr/>

STNodePropertyGrid can display and modify properties. Then this case will provide a data input through the STNodePropertyGrid.

<pre class='pre_code'>public class NumberInputNode : STNode

{

private int _Number;

[STNodeProperty("Input", "Input number")]

public int Number {

get { return _Number; }

set {

_Number = value;

this.SetOptionText(m_op_out, value.ToString());

m_op_out.TransferData(value);

}

private STNodeOption m_op_out;

protected override void OnCreate() {

base.OnCreate();

this.Title = "NumberInput";

m_op_out = this.OutputOptions.Add("0", typeof(int), false);

}

}</pre>

</div>

<pre class='pre_code'>public class NumberAddNode : STNode {

private STNodeOption m_op_in_1;

private STNodeOption m_op_in_2;

private STNodeOption m_op_out;

protected override void OnCreate() {

base.OnCreate();

this.Title = "NumberAdd";

m_op_in_1 = this.InputOptions.Add("0", typeof(int), true);

m_op_in_2 = this.InputOptions.Add("0", typeof(int), true);

m_op_in_1.DataTransfer += new STNodeOptionEventHandler(m_op_in_DataTransfer);

m_op_in_2.DataTransfer += new STNodeOptionEventHandler(m_op_in_DataTransfer);

}

void m_op_in_DataTransfer(object sender, STNodeOptionEventArgs e) {

if (sender == m_op_in_1) m_op_in_1.Data = 0;

if (sender == m_op_in_2) m_op_in_2.Data = 0;

} else {

if (sender == m_op_in_1) m_op_in_1.Data = e.TargetOption.Data;

if (sender == m_op_in_2) m_op_in_2.Data = e.TargetOption.Data;

}

if (m_op_in_1.Data == null) m_op_in_1.Data = 0;

if (m_op_in_2.Data == null) m_op_in_2.Data = 0;

int nResult = (int)m_op_in_1.Data + (int)m_op_in_2.Data;

this.SetOptionText(m_op_in_1, m_op_in_1.Data.ToString());

this.SetOptionText(m_op_in_2, m_op_in_2.Data.ToString());

this.SetOptionText(m_op_out, nResult.ToString());

m_op_out.TransferData(nResult);

}

}</pre>

</div>

Pass the entered number through the set accessor of the Number property.

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_a'>ReadOnlyModel</h2></div>

<hr/>

In some cases, you don’t want STNodePropertyGrid to set the properties, you just want to display the properties, you can enable ReadOnlyModel

<pre class='pre_code'>stNodePropertyGrid1.ReadOnlyModel = true;</pre>

</div>

You can not set the properoty value from STNodePropertyGrid when the ReadOnlyModel is true

<h1 class='h_title anchor_point' anchor='b_b'>STNodePropertyDescriptor</h1>

The Name and Description properties of STNodePropertyAttribute are introduced above. There is also a properoty DescriptorType whose data type is Type and the default value is typeof(STNodePropertyDescriptor)

Although from the current case, there is no problem with the above operation, but not all data type properties can be correctly supported by STNodePropertyGrid. The default STNodePropertyDescriptor only supports the following data types.

intfloatdoubleboolstringEnum and their Array

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_c'>e.g. - ColorTestNode</h2></div>

<hr/>

Create a node below and add an properoty of type Color

<pre class='pre_code'>public class ColorTestNode : STNode

{

[STNodeProperty("TitleColor", "Get or set the node TitleColor")]

public Color ColorTest {

get { return this.TitleColor; }

set { this.TitleColor = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "ColorNode";

}

}</pre>

</div>

If you run the above code, you will find that there will be errors when setting properties through STNodePropertyGrid, and the display of property values in STNodePropertyGrid is also very strange.

Even though System.Windows.Forms.PropertyGrid can support many data types, it does not support all types. For example, when the property type is a user-defined type, the property editor cannot know how to interact with the properties on the property grid.

The solution for System.Windows.Forms.PropertyGrid is to provide TypeConverter, mark the target type with TypeConverter and implement overloading so that PropertyGrid can know how to interact with the PropertyGrid through TypeConverter .

The solution provided by STNodePropertyGrid is STNodePropertyDescriptor.

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_d'>about properoty discriptor</h2></div>

<hr/>

STNodePropertyGrid can correctly obtain and modify the value of the STNode property, because STNodePropertyDescriptor is performing data conversion and responding to some event operations on the property window.

The property marked by STNodePropertyAttribute will be packaged as STNodePropertyDescriptor and passed to STNodePropertyGrid. A STNodePropertyDescriptor contains the Name and Description in STNodePropertyAttribute and the position information of the attribute will be displayed on STNodePropertyGrid, and How to respond to mouse events or keyboard events.

It can be considered that STNodePropertyDescriptor is a graphical interface for each properoty marked by STNodePropertyAttribute, and the main function is to transfer data between the graphical interface and the real properoty.

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_e'>GetValueFromString()</h2></div>

<hr/>

/// Convert the value of the string to the value of the property's type.

/// Only int float double string bool and the above types of Array are supported by default

/// If the target type is not in the above, please override the function to convert it by yourself.

/// </summary>

/// <param name="strText">text</param>

/// <returns>the properoty value</returns>

protected internal virtual object GetValueFromString(string strText);</pre>

</div>

The GetValueFromString() function converts the string entered by the user in the STNodePropertyGrid into the real value required by the property.

For example: If the property is int type value and the user can only enter the string 123 in STNodePropertyGrid, then the default GetValueFromString() function will be int.Parse(strText) such as string Type 123 becomes 123 of type int

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_f'>GetStringFromValue()</h2></div>

<hr/>

/// Convert the value of the properoty to a string.

/// Calling Tostring() of the property value is the default operation.

/// If you need special processing, please override this function to convert by yourself

/// </summary>

/// <returns>string</returns>

</div>

The GetStringFromValue() function converts the property value into a string and displays it in the STNodePropertyGrid. The default GetStringFromValue() internally just calls the property value ToString().

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_g'>e.g. - ColorTestNode</h2></div>

<hr/>

Extend the STNodePropertyDescriptor of ColorTestNode.ColorTest in the above failed example.

<pre class='pre_code'>public class ColorTestNode : STNode

{

//Specify to use the extended STNodePropertyDescriptor in order to complete the support for the Color type.

[STNodeProperty("TitleColor", "Get or set the node TitleColor", DescriptorType = typeof(ColorDescriptor))]

public Color ColorTest {

get { return this.TitleColor; }

set { this.TitleColor = value; }

}

protected override void OnCreate() {

base.OnCreate();

this.Title = "ColorNode";

}

}

public class ColorDescriptor : STNodePropertyDescriptor

{

protected override object GetValueFromString(string strText) {

string[] strs = strText.Split(',');

return Color.FromArgb(int.Parse(strs[0]), int.Parse(strs[1]), int.Parse(strs[2]), int.Parse(strs[3]));

//return base.GetValueFromString(strText);

}

protected override string GetStringFromValue() {

var v = (Color)this.GetValue(null);//get the value

return v.A + "," + v.R + "," + v.G + "," + v.B;

//return base.GetStringFromValue();

}

}</pre>

</div>

At this time, the property value can be displayed and set correctly, because GetValueFromString() and GetStringFromValue() correctly complete the conversion between the property value and the string.

<hr/>

<div><h2 class='h_option anchor_point' anchor='b_h'>e.g. - ColorTestNode</h2></div>

<hr/>

Although the above example can be used to set the Color property through ARGB,but this method is not friendly enough.

Can it be the same as System.Windows.Forms.PropertyGrid to allow users to make visual settings. STNodePropertyDescriptor can of course do it.

STNodePropertyDescriptor can be regarded as a custom control that displays properties. Since it is a custom control, it can respond to mouse events.

now add some code to ColorDescriptor

<pre class='pre_code'>public class ColorDescriptor : STNodePropertyDescriptor

{

//This rect is used as a color preview for drawing on the STNodePropertyGrid.

private Rectangle m_rect;

string[] strs = strText.Split(',');

//return base.GetValueFromString(strText);

}

protected override string GetStringFromValue() {

var v = (Color)this.GetValue(null);

//return base.GetStringFromValue();

}

//Called when the position of this property is confirmed in the STNodePropertyGrid.

protected override void OnSetItemLocation() {

base.OnSetItemLocation();

Rectangle rect = base.RectangleR;

m_rect = new Rectangle(rect.Right - 25, rect.Top + 5, 19, 12);

}

//Called when drawing this properoty value area in the STNodePropertyGrid

protected override void OnDrawValueRectangle(DrawingTools dt) {

base.OnDrawValueRectangle(dt);//call the base and then draw color preview

dt.SolidBrush.Color = (Color)this.GetValue(null);

dt.Graphics.FillRectangle(dt.SolidBrush, m_rect);//fill color

dt.Graphics.DrawRectangle(Pens.Black, m_rect); //draw rectangle

}

protected override void OnMouseClick(MouseEventArgs e) {

//If the user clicks in the color preview area, show system color dialog.

if (m_rect.Contains(e.Location)) {

ColorDialog cd = new ColorDialog();

if (cd.ShowDialog() != DialogResult.OK) return;

this.SetValue(cd.Color, null);

this.Invalidate();

return;

}

//Otherwise, show the text input box by default.

base.OnMouseClick(e);

}

}</pre>

</div>

At this point, you can see that compared with the previous example, there is one more color preview area, and clicking the preview area will pop up the system color dialog box to set the property value. If you click in the non-preview area, the default operation method will be show text input box to input ARGB.

About STNodePropertyDescriptor there are two important overloaded functions GetBytesFromValue() and SetValue(byte[]) which will be introduced in Save Canvas later.

<h1 class='h_title anchor_point' anchor='b_i'>STNodeTreeView</h1>

View remainder of file in raw view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

tutorials_en.html

Latest commit

History

tutorials_en.html

File metadata and controls