@myrmidon/gve-core 0.0.3 → 0.0.5

package/lib/components/ln-heights-editor/ln-heights-editor.component.d.ts

@@ -1,19 +1,41 @@
 import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormControl } from '@angular/forms';
 import * as i0 from "@angular/core";
+/**
+ * 🔑 `gve-ln-heights-editor`
+ *
+ * A component to edit line heights.
+ * Used by the `gve-snapshot-editor` component.
+ *
+ * - ▶️ `lineCount` (`number`): the number of lines.
+ * - ▶️ `heights` (`Record<number, number>`): the line heights.
+ * - 🔥 `heightsChange` (`EventEmitter<Record<number, number>>`): the event
+ * emitted when the heights change.
+ */
 export declare class LnHeightsEditorComponent implements OnInit, OnDestroy {
     private _subs?;
     private _heights?;
     private _lineCount;
     lineNumber: FormControl<number>;
     height: FormControl<number>;
+    /**
+     * The total number of lines in the text.
+     */
     get lineCount(): number;
     set lineCount(value: number);
+    /**
+     * The heights map of the lines. Each key is a line number and the value is
+     * the height of the line.
+     */
     get heights(): Record<number, number> | undefined;
     set heights(value: Record<number, number> | undefined | null);
+    /**
+     * The event emitted when the heights change.
+     */
     readonly heightsChange: EventEmitter<Record<number, number> | undefined>;
     lineNumbers: number[];
     constructor(formBuilder: FormBuilder);
+    private pruneHeights;
     ngOnInit(): void;
     ngOnDestroy(): void;
     reset(): void;

package/lib/components/operation-source-editor/operation-source-editor.component.d.ts

@@ -2,13 +2,44 @@ import { EventEmitter } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { LabeledId, OperationSource } from '@myrmidon/gve-snapshot-view';
 import * as i0 from "@angular/core";
+/**
+ * 🔑 `gve-operation-source-editor`
+ *
+ * A component to edit an operation source.
+ * Used by chain operation editor component.
+ *
+ * - ▶️ `source` (`OperationSource`): the source to edit.
+ * - ▶️ `ids` (`LabeledId[]`): the list of source IDs, when using a closed
+ * list for them.
+ * - ▶️ `types` (`LabeledId[]`): the list of source types, when using a closed
+ * list for them.
+ * - 🔥 `sourceChange` (`EventEmitter<OperationSource>`): the event emitted
+ * when the source changes.
+ * - 🔥 `sourceCancel` (`EventEmitter<void>`): the event emitted when the
+ * edit is canceled.
+ */
 export declare class OperationSourceEditorComponent {
     private _source;
+    /**
+     * The source to edit.
+     */
     get source(): OperationSource | undefined;
     set source(value: OperationSource | undefined | null);
+    /**
+     * The list of source IDs when it's closed.
+     */
     ids?: LabeledId[];
+    /**
+     * The list of source types when it's closed.
+     */
     types?: LabeledId[];
+    /**
+     * The event emitted when the source changes.
+     */
     readonly sourceChange: EventEmitter<OperationSource | undefined>;
+    /**
+     * The event emitted when the edit is canceled.
+     */
     sourceCancel: EventEmitter<void>;
     id: FormControl<string>;
     type: FormControl<string>;

package/lib/components/simple-tree/simple-tree.component.d.ts

@@ -1,11 +1,30 @@
 import { EventEmitter, OnInit } from '@angular/core';
 import { TreeNode } from '@myrmidon/gve-snapshot-view';
 import * as i0 from "@angular/core";
+/**
+ * 🔑 `gve-simple-tree`
+ *
+ * A simple tree component.
+ *
+ * - ▶️ `node` (`TreeNode<any>`): the node to display.
+ * - ▶️ `selectedNode` (`TreeNode<any> | null`): the selected node.
+ * - 🔥 `selectedNodeChange` (`EventEmitter<TreeNode<any> | null>`): the event
+ * emitted when the selected node changes.
+ */
 export declare class SimpleTreeComponent implements OnInit {
     private _node;
+    /**
+     * The node to display.
+     */
     get node(): TreeNode<any> | undefined;
     set node(value: TreeNode<any> | undefined);
+    /**
+     * The selected node.
+     */
     selectedNode?: TreeNode<any> | null;
+    /**
+     * The event emitted when the selected node changes.
+     */
     selectedNodeChange: EventEmitter<TreeNode<any> | null>;
     level: number;
     ngOnInit(): void;

package/lib/components/snapshot-editor/snapshot-editor.component.d.ts

@@ -1,13 +1,22 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { ElementRef, EventEmitter, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { DialogService } from '@myrmidon/ng-mat-tools';
-import { CharChainOperation, CharNode, GveVisualEvent, Snapshot, SnapshotViewData, SnapshotViewRenderEvent } from '@myrmidon/gve-snapshot-view';
+import { CharChainOperation, CharNode, GveAnimationTimeline, GveVisualEvent, Snapshot, SnapshotViewComponent, SnapshotViewData, SnapshotViewRenderEvent } from '@myrmidon/gve-snapshot-view';
 import { VarBaseTextRange } from '../base-text-view/base-text-view.component';
 import { ChainOperationContextStep, CharChainResult, GveApiService } from '../../services/gve-api.service';
 import * as i0 from "@angular/core";
 /**
- * A component to edit a text snapshot.
+ * 🔑 `gve-snapshot-editor`
+ *
+ * A component to edit a text snapshot. This is the top level component in the GVE core
+ * library.
+ *
+ * - ▶️ `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.
  */
 export declare class SnapshotEditorComponent implements OnInit {
     private _api;
@@ -17,6 +26,9 @@ export declare class SnapshotEditorComponent implements OnInit {
     private _snapshot?;
     private _renderer?;
     private _previewing?;
+    private _transparentIds?;
+    private _stepPickFrozen?;
+    snapshotView?: ElementRef<SnapshotViewComponent>;
     /**
      * The snapshot to edit.
      */
@@ -30,6 +42,10 @@ export declare class SnapshotEditorComponent implements OnInit {
      * True to disable saving.
      */
     noSave?: boolean;
+    /**
+     * True to enable debug mode for view rendition.
+     */
+    debug?: boolean;
     /**
      * Emitted when the user saves the edited snapshot.
      */
@@ -60,7 +76,11 @@ export declare class SnapshotEditorComponent implements OnInit {
     imageWidth: FormControl<number>;
     imageHeight: FormControl<number>;
     defs: FormControl<string | null>;
+    timelines: FormControl<GveAnimationTimeline[]>;
+    opTags: string[];
+    opElementIds: string[];
     textRange?: VarBaseTextRange;
+    lineCount: number;
     editedOp?: CharChainOperation;
     editedOpIndex: number;
     busy?: boolean;
@@ -75,37 +95,184 @@ export declare class SnapshotEditorComponent implements OnInit {
         6: string;
         7: string;
     };
-    lineCount: number;
     viewTitle: string;
     viewData?: SnapshotViewData;
     visualInfo?: string;
     rulers: boolean;
     result?: CharChainResult;
     resultOperationId?: string;
+    initialStepIndex: number;
     constructor(formBuilder: FormBuilder, _api: GveApiService, _dialogService: DialogService, _snackbar: MatSnackBar);
     ngOnInit(): void;
-    updateViewData(newOperation?: CharChainOperation, snapshot?: Snapshot, title?: string): void;
+    /**
+     * Set the view data for the snapshot view.
+     *
+     * @param snapshot The optional snapshot data to use. If not provided,
+     * a snapshot will be created from the form data.
+     * @param title The optional title to set for the view.
+     */
+    private setViewData;
     private updateForm;
+    /**
+     * Update the line count based on the received text.
+     * @param text The text to use for counting lines.
+     */
+    private updateLineCount;
+    /**
+     * Handle the event fired by the base text editor to pick a text range.
+     * @param range The picked range.
+     */
+    onRangePick(range: VarBaseTextRange): void;
+    /**
+     * Handle the event fired by the base text editor to change the base text.
+     * @param text The text to set.
+     */
+    onTextChange(text: CharNode[]): void;
+    /**
+     * Update the lists of operation output tags and element IDs by collecting
+     * all the operation tags and the IDs of the elements in their diplomatic.g
+     * SVG code if any.
+     */
+    private updateOpLists;
+    /**
+     * Edit a new operation.
+     */
     editNewOperation(): void;
+    /**
+     * Edit (a copy of) the operation at the specified index.
+     * @param index The operation index.
+     */
     editOperation(index: number): void;
-    private closeEditedOp;
+    /**
+     * Close the currently edited operation.
+     */
+    private closeEditedOperation;
+    /**
+     * Handle the event fired by the operation editor to cancel
+     * the current operation edits.
+     */
     onOperationCancel(): void;
-    onOperationChange(op: CharChainOperation): void;
+    /**
+     * Handle the event fired by the operation editor to change
+     * the currently edited operation, or add a new one if that
+     * was a new operation.
+     * @param op The changed operation.
+     */
+    onOperationChange(op: CharChainOperation): Promise<void>;
+    /**
+     * Delete the operation at the specified index.
+     * @param index The index of the operation to delete.
+     */
     deleteOperation(index: number): void;
-    onTextChange(text: CharNode[]): void;
-    onRangePick(range: VarBaseTextRange): void;
+    /**
+     * Parse the operations from their text and append them to the current
+     * snapshot operations.
+     */
     parseOperations(): void;
+    private removeAllOperations;
+    /**
+     * Remove all the operations.
+     */
     clearOperations(): void;
+    /**
+     * Parse all the id attributes from the received SVG code and
+     * return them as an array.
+     *
+     * @param svg The SVG content to parse or undefined.
+     * @returns Array of IDs found in the SVG content or undefined.
+     */
+    private parseSvgIds;
+    /**
+     * Run the operations up to the specified index (included).
+     * This is 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.
+     *   - parsing a batch of operations.
+     *   - deleting an operation.
+     *
+     * @param index The index of the operation to run to.
+     * @param lastOperation The operation to use in place of the existing
+     * operation in the snapshot at index. This is used when previewing
+     * the edited operation from within the operation editor.
+     */
+    runTo(index: number, lastOperation?: CharChainOperation): Promise<void>;
+    /**
+     * Run the operations up to the last operation if any.
+     * Otherwise, just update the snapshot view.
+     */
+    runToLast(): void;
+    /**
+     * Update the snapshot view by running the operations up to the
+     * currently edited operation if any.
+     *
+     * @param operation The operation being previewed.
+     */
     onOperationPreview(operation: CharChainOperation): void;
-    runTo(index: number): void;
-    onStepPick(step: ChainOperationContextStep): void;
+    /**
+     * Build the snapshot at the specified execution step. This implies adding
+     * the nodes introduced by the operations up to the specified step, and
+     * updating the features of the nodes introduced by the specified step.
+     * Also, the operations after the specified step are removed from the
+     * snapshot.
+     *
+     * @param step The step to build the snapshot at.
+     * @returns The snapshot at the specified step.
+     */
+    private buildSnapshotAtStep;
+    private playTimeline;
+    /**
+     * Handle the event fired by the chain result view to pick a step.
+     *
+     * @param step The step to pick.
+     */
+    onStepPick(step: ChainOperationContextStep): Promise<void>;
+    /**
+     * Handle the event fired by a visual in the snapshot view.
+     *
+     * @param event The event.
+     */
     onVisualEvent(event: CustomEvent<GveVisualEvent>): void;
+    /**
+     * Handle the change of line heights by updating the form control.
+     *
+     * @param heights The line heights.
+     */
     onHeightsChange(heights: Record<number, number> | undefined): void;
+    /**
+     * Handle the change of timelines by updating the form control.
+     *
+     * @param timelines The timelines.
+     */
+    onTimelinesChange(timelines: GveAnimationTimeline[]): void;
+    /**
+     * Emit the cancel event for this snapshot edit.
+     */
     close(): void;
+    /**
+     * Handle the render event from the snapshot view to get a reference
+     * to the renderer.
+     *
+     * @param event The rendition event.
+     */
     onSnapshotRender(event: CustomEvent<SnapshotViewRenderEvent>): void;
+    /**
+     * Toggle rulers in the snapshot view.
+     */
     toggleRulers(): void;
+    /**
+     * Get a snapshot from the form data.
+     *
+     * @returns New snapshot object.
+     */
     private getSnapshot;
+    /**
+     * Get a snapshot from the form data and emit it
+     * in the snapshot change event.
+     */
     save(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SnapshotEditorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SnapshotEditorComponent, "gve-snapshot-editor", never, { "snapshot": { "alias": "snapshot"; "required": false; }; "batchOps": { "alias": "batchOps"; "required": false; }; "noSave": { "alias": "noSave"; "required": false; }; }, { "snapshotChange": "snapshotChange"; "snapshotCancel": "snapshotCancel"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SnapshotEditorComponent, "gve-snapshot-editor", never, { "snapshot": { "alias": "snapshot"; "required": false; }; "batchOps": { "alias": "batchOps"; "required": false; }; "noSave": { "alias": "noSave"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; }, { "snapshotChange": "snapshotChange"; "snapshotCancel": "snapshotCancel"; }, never, never, true, never>;
 }

package/lib/components/steps-map/steps-map.component.d.ts

@@ -2,7 +2,23 @@ import { EventEmitter } from '@angular/core';
 import { ChainOperationContextStep } from '../../services/gve-api.service';
 import * as i0 from "@angular/core";
 /**
- * A map of steps in a chain operation context.
+ * 🔑 `gve-steps-map`
+ *
+ * A map of steps in a chain operation context. This shows the list of
+ * steps in the execution of a set of operations, and allows the user to
+ * pick a step to view.
+ *
+ * Used by the `gve-chain-result-view` component.
+ *
+ * - ▶️ `steps` (`ChainOperationContextStep[]`): the steps to display.
+ * - ▶️ `selectedStep` (`ChainOperationContextStep`): the step that is
+ * currently selected.
+ * - ▶️ `textFontSize` (`string`): the font size of the steps text.
+ * - 🔥 `selectedStepChange` (`ChainOperationContextStep`): emitted when
+ * the selectd step has been changed by the user. This is not emitted
+ * when the selected step is changed programmatically, unless this is
+ * the first time the steps are set. In that case, the last step is
+ * automatically selected.
  */
 export declare class StepsMapComponent {
     private _steps?;
@@ -20,10 +36,11 @@ export declare class StepsMapComponent {
      */
     textFontSize: string;
     /**
-     * Emitted when the selectd step has changed.
+     * Emitted when the selected step has changed by user, or when
+     * the steps are set for the first time.
      */
     selectedStepChange: EventEmitter<ChainOperationContextStep>;
-    onSelectStep(step: ChainOperationContextStep): void;
+    onStepClick(step: ChainOperationContextStep): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<StepsMapComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<StepsMapComponent, "gve-steps-map", never, { "steps": { "alias": "steps"; "required": false; }; "selectedStep": { "alias": "selectedStep"; "required": false; }; "textFontSize": { "alias": "textFontSize"; "required": false; }; }, { "selectedStepChange": "selectedStepChange"; }, never, never, true, never>;
 }

package/lib/services/gve-api.service.d.ts

@@ -29,6 +29,13 @@ export interface CharChainResult {
         [key: string]: CharNode[];
     };
 }
+/**
+ * The input and output tags of a char-based chain operation.
+ */
+export interface ChainOperationTags {
+    inputTag: string;
+    outputTag: string;
+}
 /**
  * Service to interact with the GVE API.
  */
@@ -52,6 +59,13 @@ export declare class GveApiService {
      * @returns Result wrapper.
      */
     runOperations(text: CharNode[], operations: CharChainOperation[]): Observable<ResultWrapper<CharChainResult>>;
+    /**
+     * Get the input and output tags for the given operations.
+     *
+     * @param operations The operations.
+     * @returns Result wrapper.
+     */
+    getTags(operations: CharChainOperation[]): Observable<ResultWrapper<string[]>>;
     static ɵfac: i0.ɵɵFactoryDeclaration<GveApiService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<GveApiService>;
 }

package/lib/services/settings.service.d.ts

@@ -1,6 +1,7 @@
 import * as i0 from "@angular/core";
 /**
- * Service to store and retrieve dynamic settings.
+ * Service to store and retrieve dynamic settings. On demand, settings can
+ * be persisted in the local storage.
  */
 export declare class SettingsService {
     private readonly _cache;

package/lib/validators/svg-validators.d.ts

@@ -1,4 +1,10 @@
 import { ValidatorFn } from '@angular/forms';
+/**
+ * Validators for SVG.
+ */
 export declare class SvgValidators {
+    /**
+     * Validator for a valid SVG `g` root element in GVE.
+     */
     static rootGValidator(): ValidatorFn;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@myrmidon/gve-core",
-  "version": "0.0.3",
-  "description": "Cadmus - GVE frontend core components.",
+  "version": "0.0.5",
+  "description": "Cadmus - GVE Angular frontend core components.",
   "keywords": [
     "GVE"
   ],
@@ -20,13 +20,13 @@
     "@myrmidon/ng-mat-tools": "^3.1.0",
     "@myrmidon/ng-tools": "^3.1.1",
     "@myrmidon/gve-snapshot-view": "^0.0.19",
-    "@svgdotjs/svg.js": "^3.2.3",
+    "@svgdotjs/svg.js": "^3.2.4",
     "gsap": "^3.12.5",
     "monaco-editor": "^0.50.0",
     "nanoid": "^5.0.7"
   },
   "dependencies": {
-    "tslib": "^2.3.0"
+    "tslib": "^2.6.3"
   },
   "sideEffects": false,
   "module": "fesm2022/myrmidon-gve-core.mjs",

package/public-api.d.ts

@@ -1,7 +1,6 @@
 export * from './lib/models';
 export * from './lib/components/animation-timeline/animation-timeline.component';
 export * from './lib/components/animation-tween/animation-tween.component';
-export * from './lib/components/animation-vars/animation-vars.component';
 export * from './lib/components/base-text-char/base-text-char.component';
 export * from './lib/components/base-text-editor/base-text-editor.component';
 export * from './lib/components/base-text-view/base-text-view.component';