pcui

by will on News

PCUI Framework Migrated to TypeScript

PCUI is the open source, front-end framework for building amazing web-based tools like the PlayCanvas Editor, glTF Viewer, Texture Tool and more!

Today, we are excited to announce the release of PCUI version 2.10.0! This new release includes a number of significant updates and improvements that will make building web tools with PCUI even easier and more efficient.

One of the biggest changes in this release is the migration of the entire source code from JavaScript to TypeScript. This will provide a number of benefits to developers, including improved type checking, better code completion and IntelliSense in IDEs, and easier maintenance and refactoring of code.

In addition to the source code migration, we have also released a new API reference manual built with Typedoc. This will make it easier for developers to understand and use the various APIs and components available in PCUI.

TypeScript developers will also be pleased to know that we have improved the TypeScript declarations in this release, making it even easier to use PCUI in a TypeScript project.

Finally, we want to highlight the open source nature of PCUI. We believe in the power of the open source community to build great software together, and we encourage open source developers to get involved with the project. Whether you want to contribute code, report issues, or just provide feedback, we welcome your participation. Explore the PCUI repo today on GitHub!

Thank you for using PCUI, and we hope you enjoy the new release!

by Elliott Thompson on News

A Graph Rendering Library for the Web: PCUI Graph

Today, we are excited to announce a new open source library: PCUI Graph. It’s a graph rendering framework for the browser which can be used to build and view various types of node-based graphs.

PCUI Graph in action

Last year, we open sourced PCUI, a front-end framework for building web-based tools like the PlayCanvas Editor. This was subsequently used as the foundation for a new family of open source tools: the glTF Viewer and the PlayCanvas Examples Browser. However, some of our more recent tools projects have had requirements related to the creation and editing of node-based graphs. As a result, we set about developing a new plugin to PCUI called PCUI Graph. This plugin is already in use today since it powers both the PlayCanvas Shader Editor and Animation State Graph Editor:

You can rapidly map out key parts of your project’s workflow using pcui-graph, as it supports both directed and visual programming graphs. Here are some of the key features that PCUI Graph provides:

  • Schema based – Each graph you create is based on a JSON formatted schema, allowing you to easily define the type of your graph up-front.
  • Event system – You can hook up event listeners to any of the UI interactions made to a graph.
  • Graph state data – Easily retrieve the current state of the graph in JSON data format at any time and this can be loaded back into the graph later.
  • Context menus – You can define context menus in a graph schema, supporting the creation and deletion of nodes / edges in the UI.
  • Simple API – Any of the user interactions with the graph can also be made programmatically.
  • Styling – The graph can be configured to change the default styling of nodes / edges. These styles can also be overridden in the schema of each individual node / edge type.

Useful links

So get started with PCUI and PCUI Graph today. We can’t wait to see what you build!