Skip to main content

Existing Slates For Node Feature Extension

Joint provides several existing editor slates that can be used on your custom graph editor nodes.

These slates can help you create a consistent and user-friendly editing interface for your nodes, without having to build everything from scratch.

WYSIWYG Text Editor Slate​

Joint provides a WYSIWYG text editor slate (SContextTextEditor) that can be used to create rich text editing experiences within your graph editor nodes.

DF_Text fragment of Joint Native uses this slate on its graph editor node to allow users to edit text content directly within the node.

img_1.png

info

Please check out JointEditor\Public\Editor\Slate\TextEditor\SContextTextEditor.h 's SContextTextEditor.

Node Picker Slate (Work with property Handle & Raw Pointer)​

Joint provides two Node Picker slate that can be used to create node selection interfaces within your graph editor nodes. One works with Property Handle, and the other works with Raw Pointer.

We only let users use the Node Picker slate with Raw Pointer (SJointNodePointerSlate) in their custom graph editor nodes, not the one with Property Handle.

img.png

info

Please check out JointEditor\Public\Editor\Slate\GraphNode\JointGraphNodeSharedSlates.h 's SJointNodePointerSlate.

Joint Graph Retainer Slate​

Joint uses a unique version of Retainer Box that is optimized for graph editors and handled some specific issues with the original Retainer Box. (editor crashes)

info

Please check out JointEditor\Public\Editor\Slate\GraphNode\SJointRetainerWidget.h

Joint Advanced Style Widgets & Shared Styles​

Joint Editor module uses several pre-defined widgets with unique animations and interactions that fit Joint Editor's style.

Joint currently provides button, toggle button, border. (SJointOutlineBorder, SJointOutlineButton, SJointOutlineToggleButton)

You can use these widgets in your custom graph editor nodes to maintain a consistent look and feel as you need.

info

These widgets uses Volt module to animates themselves - and you also can use Volt to create your own custom animations for your widgets and if so, they will be the best boilerplates to start with.

info

Almost every Joint Editor module's Slate widgets use these, so it's not very hard to find use-cases and materials for them.

  • SJointOutlineBorder: Used in graph editor nodes' pin widgets, node widgets, etc.
  • SJointOutlineButton: Used in graph editor nodes' buttons, search & replace's filter buttons, etc.
  • SJointOutlineToggleButton: Used in some specific locations like, Search & Replace's Display only current Graph toggle button, etc.

So, basically in this image, you can find all three widgets. img_2.png

You can find these slates in the JointEditor\Public\Editor\Slate\JointAdvancedWidgets.h file.