From 7918f71c1dec5045cffd373a11828fd28b43bd34 Mon Sep 17 00:00:00 2001 From: Gabriel Majeri Date: Sun, 12 Jul 2020 12:20:53 +0300 Subject: [PATCH] Add docs for GUI system --- README.md | 5 +++-- gui/README.md | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 2 deletions(-) create mode 100644 gui/README.md diff --git a/README.md b/README.md index 0c9abb20..98d93373 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,8 @@ Graphite is an open-source, cross-platform digital content creation desktop app Graphite is in an early stage of development and its vision is highly ambitious. The project is seeking collaborators to help design and develop the software. Please open an issue to get in touch if interested! +We have a Discord server. Use the following link to join: `https://di-s-co-rd.gg/p2-a-Y-jM3` (remove the dashes). + ## Design Interactive viewport *(work-in-progress design)*: @@ -19,9 +21,8 @@ Node editor *(work-in-progress design)*: [WebGPU](https://gpuweb.github.io/gpuweb) (via Mozilla's [WGPU Rust library](https://wgpu.rs)) is being used as the graphics API because it is portable and safe. It makes deployment on the web and native platforms easy while ensuring consistent cross-platform behavior. It also offers the ability to use compute shaders to perform many tasks that speed up graphical computations. -The GUI system is being custom-built for the specific needs of Graphite's interface, based on a simple XML format inspired by HTML, CSS, and Vue.js. This is the current focus of development. +The [GUI system](gui) is being custom-built for the specific needs of Graphite's interface, based on a simple XML format inspired by HTML, CSS, and Vue.js. This is the current focus of development. JavaScript (via [Deno's V8 Rust library](https://github.com/denoland/rusty_v8)) will likely be the chosen scripting language used to extend functionality to areas of the application. This will make it faster to implement many features that are less dependent on low-level performance and it provides an integrated solution for future plugin support. [Pathfinder](https://github.com/servo/pathfinder) is the Rust library that will be used for vector graphics rendering. - diff --git a/gui/README.md b/gui/README.md new file mode 100644 index 00000000..77737100 --- /dev/null +++ b/gui/README.md @@ -0,0 +1,40 @@ +# GUI system + +This directory contains the XML files describing the components which make up Graphite's GUI. + +## Principles + +The framework is inspired by [Vue.js](https://vuejs.org/). +Each component's layout is defined in an XML, and recursively made out of lower-level components. + +Interactivity is provided by script files which expose reactive variables. As these variables are mutated, the component is updated to match the current state. + +## Layout + +The layout engine does a top-down pass through the component tree in order to determine what to render. + +Layout is controlled using predefined attributes, such as `width`, `height`, `x-align`, `y-align`, `spacing` or `padding`. + +## Component lifetime + +The children of a component are passed to it as a `content` attribute. For example, looking at the row component: +```xml + + {{INNER_XML}} + +``` +The `content` attribute defines a new variable `INNER_XML` of type either `GuiXml` or `None`, which can contain more XML or nothing at all. It has a default value of `none` (of type `None`). +This is then expanded in the body of the row: `{{INNER_XML}}`. + +## Defining new components + +### Component files + +To define a new component, create a new `.xml` file in this directory. Subdirectories become namespaces for the components (e.g. the file `window/main.xml` defines a component ``). + +### Parameters + +User-defined parameters start with a colon (`:`). + +They are created by adding attributes to a component source file: +`:parameter="VARIABLE_NAME: (VariableType) = defaultValue"`