Gve Core

• 🚀 npm i @myrmidon/gve-core.

This library was generated with Angular CLI version 17.0.0.

This is the core UI library for GVE.

@startuml
[animation timeline]
[animation timeline set]
[animation tween]
[base text char]
[base text editor]
[base text view]
[chain op editor]
[chain result view]
[feature editor]
[feature set editor]
[feature set view]
[ln heights editor]
[batch ops editor]
[snapshot text editor]
[op source editor]
[snapshot editor]
[steps map]

[feature set editor] --> [feature editor]
[animation timeline] --> [animation tween]
[animation timeline set] --> [animation timeline]
[animation timeline set] --> [dialog service]
[base text view] --> [base text char]
[base text editor] --> [base text view]
[base text editor] --> [feature set editor]
[base text editor] --> [dialog service]
[chain op editor] --> [feature set editor]
[chain op editor] --> [op source editor]
[chain op editor] --> [settings service]
[chain op editor] --> [dialog service]
[chain result view] --> [base text view]
[chain result view] --> [feature set view]
[chain result view] --> [steps map]
[snapshot editor] --> [snapshot text editor]
[snapshot editor] --> [batch ops editor]
[snapshot editor] --> [animation timeline set]
[snapshot editor] --> [base text editor]
[snapshot editor] --> [chain op editor]
[snapshot editor] --> [chain result view]
[snapshot editor] --> [ln heights editor]
[snapshot editor] --> [snapshot view]
[snapshot editor] --> [dialog service]
[snapshot editor] --> [api service]
@enduml

Snapshot Editor

The snapshot editor is the top-level component in the library and orchestrates the behavior of all the components included in it. Its API is very simple, as it just deals with a full snapshot:

• ▶️ snapshot (Snapshot): the snapshot to edit.
• ▶️ batchOps (string): the batch operations text to set for the editor.
• ▶️ noSave (boolean): true to disable saving.
• 🔥 snapshotChange (Snapshot): emitted when the user saves the edited snapshot.
• 🔥 snapshotCancel (void): emitted when the user cancels the snapshot editing.

The only data directly handled by the component are:

• size and style;
• base text and related data;
• background image.

Operations and timelines are handled by other children components. The snapshot model is built dynamically when required (via getSnapshot), and it is displayed by a snapshot view.

View data, wrapping the snapshot and some options (debug mode, delayed rendering, rules, grid, pan and zoom, transparent SVG elements IDs), are built via setViewData, which in turns gets the snapshot from getSnapshot unless it receives one.

The key logic for displaying the snapshot is implemented in runTo, which runs the operations up to the specified index. This gets called when:

• a preview is requested by the operation editor.
• the currently edited operation is saved.
• the user picks a step in the chain result view.
• runToLast is called, which happens when:
  • setting the snapshot from the parent.
  • the number of operations changes, either by parsing a batch of operations or by deleting an operation.

This function gets the snapshot (via getSnapshot), patches it so that it corresponds to the set of operations up to the specified index, and runs all these operations. Once done, it extracts the transparent elements IDs from the last operation, updates view data (via setViewData passing the built snapshot to it), and returns the execution result.

After running operations, the result is stored in result (of type CharChainResult), which feeds the ChainResultViewComponent in charge of showing the details of each generated text version. In turn, this may fire step-pick events, which are handled by getting the snapshot at that step, updating the transparent element IDs, and updating view data (via setViewData passing the built snapshot to it); also, an animation is played if required, after running operations up to the one corresponding to the picked step.

When an operation is saved from the child operation editor (onOperationChange), all the operations are run up to the saved one.