Update documentation

This commit is contained in:
barsdeveloper
2024-09-09 17:17:13 +02:00
parent a763544b3b
commit 5d4f020a85
2 changed files with 7 additions and 13 deletions

View File

@@ -1,7 +1,7 @@
# Development Guide
Getting started with the development of this application is very easy because it has a (arguably) well defined object-oriented architecture and separation of concerns.
Getting started with the development of this application is very easy. It has a (arguably) well defined object-oriented architecture and separation of concerns.
Before starting, the gentle reader might want to make sure to be familiar with the [Lit](https://lit.dev/) library and its element [lifecycle](https://lit.dev/docs/components/lifecycle/). This library is used extensively throught the application to keep the HTML elements in sync with the data and avoid updating the DOM too often. The original author is aware that there are way more popular alternatives out there like React, Vue and Svelte, but the design of Lit fits very well into the original design of this application: vanilla JavaScript and object-oriented. This allowed the introduction of Lit with a relatively small amount of changes to the existing code, yes because the decision to use Lit was made at a later point in time. One important detail is that it does not make use of the shadow DOM (part of the Web Components), the real reason is that the development started without using Lit but it is still nice to be able to have a global CSS style (which wouldn't be possibile with a shadow root) so that restyling the library is just a matter of adding another CSS file and rewrite a few properties.
Before starting, the gentle reader might want to make sure to be familiar with the [Lit](https://lit.dev/) library and its element [lifecycle](https://lit.dev/docs/components/lifecycle/). This library is used extensively throught the application to keep the HTML elements in sync with the data and avoid updating the DOM too often. The original author is aware that there are way more popular alternatives out there like React, Vue and Svelte, but the design of Lit fits very well into the original design of this application: vanilla JavaScript and object-oriented. This allowed the introduction of Lit with a relatively small amount of changes to the existing code because the decision to use Lit was made at a later point in time. One important detail is that it does not make use of the shadow DOM (part of the Web Components), the real reason is that the development started without using Lit but it is still nice to be able to have a global CSS style (which wouldn't be possibile with a shadow root) so that restyling the library is just a matter of adding another CSS file and rewrite a few properties.
The only other external library that is used here is [Parsernostrum](https://github.com/barsdeveloper/parsernostrum): a very small but capable text parsing library used to deserialize the text produced by the UE Blueprint Editor.
@@ -47,12 +47,7 @@ And refresh the HTML page possibly holding `Shift`.
There are a few concepts that must be assimilated in order to understand the design. Those concepts are in general each mapped into a subfolder in `js/`.
### Entity
An Entity is just a data holder object that does not really do anything by itself, it has a purely information storage related purpose. The top class at the hierarchy of entities is `IEntity`. This one is a bit more complicated in the sense that it does the initialization of the entity in its constructor according to the information contained in the object provided as an argument or from the attributes static field. This ended up being a somewhat wacky runtime type system. Each subclass can specify its attributes static member variable of type object where each entry is either a value (the default value the attribute will have), a function (called to generate such default value) or an object and in that case it will be of type `AttributeInformation` (please note that in case one wants to assign as default value a specific object, the solution is either to wrap it into a `AttributeInformation` object or to return it from a function).
### Grammar and Serializer
In the `serialization/` folder the gentle reader will find all the classes responsible for transforming entities from and to text that the UE Blueprint Enditor can understand. One important class here is `Grammar` that contains similar formal grammar rules that use the [Parsernostrum library](https://github.com/barsdeveloper/parsernostrum) to create entities from Blueprint text. `Serializer` is at the top of the serializer classes hierarchy and it uses a factory design pattern to register serializers for the various entities types (check `js/serialization/initializeSerializerFactory.js`). It does both read and write of entities: to read it will use the Grammar after creating a language using a function from Parsernostrum, to write it will use methods from the class itself.
Grammar is usually the first place to look when pasting valid Blueprint code does fail. Most likely newer version of Unreal Engine did add some new data type that was not implemented yet (or this library never managed to handle it in the first place). In that case the approach should be trying to fix the existing grammar and entities to accept it, then implement the new entities and attributes.
An Entity is just a data holder object that does not really do anything by itself, it has a purely information storage related purpose. The top class at the hierarchy of entities is `IEntity`. It is responsible for the initialization of the entity in its constructor according to the information contained in the object provided as an argument or from the attributes static field. This ended up being a somewhat wacky runtime type system. Each subclass can specify its attributes in the form of a static member variable of type vanilla object where each entry is a subclass of IEntity. The entities moreover are responsible for their serialization and deserialization: each class has a `serialize()` method and a `grammar` attribute to parse entities.
### Element
Each element is just a custom HTML element type and its tag name is defined in the class file. The top level of the hierarchy is `IElement` and it inherits from `LitElement`. This class can be thought as an association between an entity and a template (and those are the arguments of the constructor). The top class `IElement` does propagate the lifecycle provided by `LitElement` to the template so that a template can hook into it.

View File

@@ -1,16 +1,15 @@
# UEBlueprint
A stand alone editor implementation of the UE's Blueprint visual language. (WIP)
A stand alone editor implementation of the UE's Blueprint visual language.
## Features:
- Intercommunicates with UE (can copy nodes both ways).
- Can be used as a WEB library to visualize, interact and modify Blueprint graphs.
- Can be used as a WEB library to visualize and interact with Blueprint graphs.
- Can be used inside VS Code to operate directly on files from a UE project (in the future).
- Graph shown is pixel-similar to how it appears in UE.
- Graph behaves the same way as it does in UE (with the default settings).
- All the information shown in he graph is just the one embedded in the serialized text (in VS Code it should be able to access assets also).
- Modern object oriented, clean, JavaScript codebase.
- All the information shown in he graph is just the one embedded in the serialized text.
## Demo:
[Try it!](https://barsdeveloper.github.io/ueblueprint/)
@@ -48,7 +47,7 @@ You can check `index.html` for a working example, the main steps are the followi
import { Blueprint } from "./dist/ueblueprint.js"
</script>
```
4. Define your blueprint the by just writing the code inside a `ueb-blueprint`, inside a `template` element.
4. Define your blueprint by just writing the code inside a `ueb-blueprint`, inside a `template` element.
```HTML
<ueb-blueprint>
<template>