Class App

Represents the main application class. The App class is responsible for managing the application's lifecycle, initializing various managers and components, and providing access to important functionalities and data. It acts as a central hub for interacting with the application and its entities.

Index

Constructors

constructor

new App(): App
Internal
Returns App
- Defined in src/ts/app.ts:373

Properties

`Internal`__mountedId

__mountedId: string = ''

`Internal`assetManager

assetManager: AssetManager

`Internal`callbackScenario

callbackScenario: any = ''

`Internal`launchAnchoringTestApp

launchAnchoringTestApp: ((nameTest: string, app: App) => Promise<undefined | number[] | {
    source: null | {
        dimensions: {
            height: number;
            width: number;
        };
        position: {
            x: number;
            y: number;
        };
    };
    target: null | {
        dimensions: {
            height: number;
            width: number;
        };
        position: {
            x: number;
            y: number;
        };
    };
}>) = launchAnchoringTest

`Internal`launchDrawTestApp

launchDrawTestApp: ((nameTest: string, app: App) =>
    | undefined
    | Shape<ShapeConfig>
    | Group
    | RegularPolygon) = launchDrawTest

`Internal`launchGeneralTestApp

launchGeneralTestApp: ((nameTest: string, app: App) => any) = launchGeneralTest

`Internal`launchTextTestApp

launchTextTestApp: ((nameTest: string, app: App) =>
    | undefined
    | string
    | number
    | boolean
    | string[]
    | {
        language: any;
        text: any;
    }
    | {
        linesNumber: number;
        width: number;
    }) = launchTextTest

`Internal`mockAPI

mockAPI: Nullable<default> = null

`Internal`onAnimationFrameObservable

onAnimationFrameObservable: Observable<unknown> = ...

Observable that notifies subscribers when an update loop is triggered.

`Internal`onContextMenuChangedObservable

onContextMenuChangedObservable: Observable<Nullable<ContextMenuProps[]>> = ...

Observable that notifies subscribers when the context menu changes (open/close).

onContextMenuSearchResultsChangeObservable

onContextMenuSearchResultsChangeObservable: Observable<OnContextMenuSearchResultsChangeObservableProps> = ...

Observable that notifies subscribers when the context menu search results change.

onCounterpartsAction

onCounterpartsAction: Observable<UserAction<keyof ActionTypeToPayloadMap>> = ...

Observable that notifies subscribers about counterparts actions.

Deprecated

Use onUserAction instead.

onDeletionObservable

onDeletionObservable: Observable<SpecIds> = ...

Observable that notifies subscribers when an entity is deleted.

`Internal`onEditorModeChangedObservable

onEditorModeChangedObservable: Observable<boolean> = ...

Observable that notifies subscribers when the editor mode is enabled

`Internal`onEntityDebugDetailsBoxChangedObservable

onEntityDebugDetailsBoxChangedObservable: Observable<Nullable<EntityDebugDetailsBoxProps>> = ...

Observable that notifies subscribers when the entity debug details box changes.

`Internal`onEntityReadyObservable

onEntityReadyObservable: Observable<unknown> = ...

Observable that notifies subscribers when all entities are ready and displayed.

`Internal`onIconsObservable

onIconsObservable: Observable<boolean[]> = ...

Observable that notifies subscribers about icon changes. This is used for testing purposes.

onLabelEditedObservable

onLabelEditedObservable: Observable<EditedLabel> = ...

Observable that notifies subscribers when a label is edited (after the user validates the edition).

`Internal`onLabelUIEditObservable

onLabelUIEditObservable: Observable<Nullable<LabelEditParams>> = ...

Observable that notifies subscribers when the label UI edit is opened/closed.

onLevelOfDetailChangedObservable

onLevelOfDetailChangedObservable: Observable<DetailLevel> = ...

Observable that notifies subscribers when the zoom level id changes.

onMessageFlowAddedObservable

onMessageFlowAddedObservable: Observable<MessageFlowAdded> = ...

`Internal`onPlaneAddedObservable

onPlaneAddedObservable: Observable<EntityAdded> = ...

Represents the selected entity.

onRequestObservable

onRequestObservable: Observable<SpecIds> = ...

Observable that notifies subscribers when the request button is clicked on a task detailed view.

onSelectionObservable

onSelectionObservable: Observable<SpecIds> = ...

Observable that notifies subscribers when an entity is selected/deselected. If the entity is deselected, the ids will be empty strings.

onSubscriptionObservable

onSubscriptionObservable: Observable<SpecIds> = ...

Observable that notifies subscribers when the subscription button is clicked on a task detailed view.

`Internal`onToolbarChangedObservable

onToolbarChangedObservable: Observable<boolean> = ...

Observable that notifies subscribers when the toolbar changes.

`Internal`onTooltipChangedObservable

onTooltipChangedObservable: Observable<TooltipEditParams> = ...

Observable that notifies subscribers when the tooltip is opened/closed.

onUserAction

onUserAction: Observable<UserAction<keyof ActionTypeToPayloadMap>> = ...

Observable that notifies subscribers when a user action occurs. This includes actions such as context menu interaction, counterparts clicks, etc.

onZoomChangedObservable

onZoomChangedObservable: Observable<number> = ...

Observable that notifies subscribers when the zoom level changes.

selectedEntity

selectedEntity: Nullable<Entity<Spec>> = null

stagePositionChangedObservable

stagePositionChangedObservable: Observable<Vector2d> = ...

Observable that notifies subscribers when the stage position changes.

`Internal`testHelpers

testHelpers: {
specCompare: ((entity: Entity<Spec>, spec: any, index: number) => boolean);
} = ...

Accessors

annotationsManager

get annotationsManager(): AnnotationsManager
Internal
Gets the annotations manager.

Returns AnnotationsManager
The annotations manager.
- Defined in src/ts/app.ts:595

dataManager

get dataManager(): default
Gets the data manager.

Returns default
The data manager.
- Defined in src/ts/app.ts:654

display

get display(): DisplayManager
Internal
Gets the display manager.

Returns DisplayManager
The display manager.
- Defined in src/ts/app.ts:585

edition

get edition(): EditionManager
Internal
Gets the edition.

Returns EditionManager
The edition manager.
- Defined in src/ts/app.ts:645

editionManager

get editionManager(): EditionManager
Internal
Gets the edition manager.

Returns EditionManager
The edition manager.
- Defined in src/ts/app.ts:615

entityManager

get entityManager(): EntitiesManager
Internal
Gets the entity manager.

Returns EntitiesManager
The entity manager.
- Defined in src/ts/app.ts:605

loader

get loader(): Loader
Internal
Returns Loader
- Defined in src/ts/app.ts:188

messageFlowManager

get messageFlowManager(): MessageFlowManager
Internal
Gets the messageFlow manager.

Returns MessageFlowManager
The messageFlow manager.
- Defined in src/ts/app.ts:625

reactComponents

get reactComponents(): ReactComponentsManager
Internal
Gets the React components.

Returns ReactComponentsManager
The React components manager.
- Defined in src/ts/app.ts:635

renderer

get renderer(): IRenderer
Internal
Returns IRenderer
- Defined in src/ts/app.ts:196

`Static`Version

get Version(): string
Internal
Current version of the application.

Automatically updated by the build process.

Returns string
- Defined in src/ts/app.ts:171

Methods

addAnnotationToEntity

addAnnotationToEntity(entityId, annotation?): void
Internal
Adds an annotation to the entity.
Parameters
- entityId: string
  The ID of the entity.
- Optionalannotation: {
      attributes: undefined | {
          key: string;
          values: {
              lcid: number;
              value: unknown;
          }[];
      }[];
      id: undefined | string;
      properties:
          | {
              evType: undefined | string;
              type:
                  | EV_START
                  | EV_START_NON_INTERRUPTING
                  | EV_INTERMEDIATE_NON_INTERRUPTING
                  | EV_END
                  | EV_INTERMEDIATE;
          } & {
              column: undefined | number;
              height: number;
              kind: "shape" | "plane";
              laneId: undefined | string;
              poolId: undefined | string;
              row: undefined | number;
              type: string;
              width: number;
              x: number;
              y: number;
          }
          | {
              columnSpan: number;
              rowSpan: number;
              type: POOL;
          } & {
              column: undefined | number;
              height: number;
              kind: "shape" | "plane";
              laneId: undefined | string;
              poolId: undefined | string;
              row: undefined | number;
              type: string;
              width: number;
              x: number;
              y: number;
          }
          | {
              columnSpan: number;
              isEmpty: undefined | boolean;
              rowSpan: number;
              type: LANE;
          } & {
              column: undefined | number;
              height: number;
              kind: "shape" | "plane";
              laneId: undefined | string;
              poolId: undefined | string;
              row: undefined | number;
              type: string;
              width: number;
              x: number;
              y: number;
          }
          | {
              type: CONDITION;
          } & {
              column: undefined | number;
              height: number;
              kind: "shape" | "plane";
              laneId: undefined | string;
              poolId: undefined | string;
              row: undefined | number;
              type: string;
              width: number;
              x: number;
              y: number;
          }
          | {
              type: RULE_OR | RULE_XOR | RULE_AND;
          } & {
              column: undefined | number;
              height: number;
              kind: "shape" | "plane";
              laneId: undefined | string;
              poolId: undefined | string;
              row: undefined | number;
              type: string;
              width: number;
              x: number;
              y: number;
          }
          | {
              decorations: undefined | {
                  key: string;
                  value: number;
              }[];
              detailContent: undefined | string;
              kpis: undefined | {
                  status: string;
              };
              processMarker: undefined | string;
              requestEnabled: undefined | boolean;
              source: undefined | string;
              status: undefined | {
                  action: undefined | string;
                  color: undefined | string;
                  name: undefined | string;
                  percentage: undefined | number;
              };
              subscriptionEnabled: undefined | boolean;
              taskMarker: undefined | string;
              taskType: undefined | string;
              type:
                  | TASK
                  | FUNC
                  | MAIN_PROCESS_IF
                  | MAIN_PROCESS
                  | SCENARIO_IF
                  | SCENARIO
                  | SUB_PROCESS_IF
                  | SUB_PROCESS
                  | TRANSACTION
                  | CALL_ACTIVITY
                  | IF_PLACEHOLDER
                  | EXTERNAL_TASK
                  | SUB_SUB_CATEGORY;
              version: undefined | string;
          } & {
              column: undefined | number;
              height: number;
              kind: "shape" | "plane";
              laneId: undefined | string;
              poolId: undefined | string;
              row: undefined | number;
              type: string;
              width: number;
              x: number;
              y: number;
          }
          | {
              anchors: number[];
              isDrawing: undefined | boolean;
              kind: EDGE;
              message: undefined | {
                  text: undefined | string;
                  xOffset: number;
                  yOffset: number;
              };
              messageVisibleKind: undefined | string;
              points: number[];
              status: undefined | {
                  color: string;
              };
              type: string;
          }
          | {
              columnSpan: number;
              rotation: number;
              rowSpan: number;
              text: string;
              type: LABEL;
          } & {
              column: undefined | number;
              height: number;
              kind: "shape" | "plane";
              laneId: undefined | string;
              poolId: undefined | string;
              row: undefined | number;
              type: string;
              width: number;
              x: number;
              y: number;
          }
          | {
              type: string;
              typeDisplayName: string;
          };
  }
  The annotation to add.
  - attributes: undefined | {
        key: string;
        values: {
            lcid: number;
            value: unknown;
        }[];
    }[]
  - id: undefined | string
  - properties:
        | {
            evType: undefined | string;
            type:
                | EV_START
                | EV_START_NON_INTERRUPTING
                | EV_INTERMEDIATE_NON_INTERRUPTING
                | EV_END
                | EV_INTERMEDIATE;
        } & {
            column: undefined | number;
            height: number;
            kind: "shape" | "plane";
            laneId: undefined | string;
            poolId: undefined | string;
            row: undefined | number;
            type: string;
            width: number;
            x: number;
            y: number;
        }
        | {
            columnSpan: number;
            rowSpan: number;
            type: POOL;
        } & {
            column: undefined | number;
            height: number;
            kind: "shape" | "plane";
            laneId: undefined | string;
            poolId: undefined | string;
            row: undefined | number;
            type: string;
            width: number;
            x: number;
            y: number;
        }
        | {
            columnSpan: number;
            isEmpty: undefined | boolean;
            rowSpan: number;
            type: LANE;
        } & {
            column: undefined | number;
            height: number;
            kind: "shape" | "plane";
            laneId: undefined | string;
            poolId: undefined | string;
            row: undefined | number;
            type: string;
            width: number;
            x: number;
            y: number;
        }
        | {
            type: CONDITION;
        } & {
            column: undefined | number;
            height: number;
            kind: "shape" | "plane";
            laneId: undefined | string;
            poolId: undefined | string;
            row: undefined | number;
            type: string;
            width: number;
            x: number;
            y: number;
        }
        | {
            type: RULE_OR | RULE_XOR | RULE_AND;
        } & {
            column: undefined | number;
            height: number;
            kind: "shape" | "plane";
            laneId: undefined | string;
            poolId: undefined | string;
            row: undefined | number;
            type: string;
            width: number;
            x: number;
            y: number;
        }
        | {
            decorations: undefined | {
                key: string;
                value: number;
            }[];
            detailContent: undefined | string;
            kpis: undefined | {
                status: string;
            };
            processMarker: undefined | string;
            requestEnabled: undefined | boolean;
            source: undefined | string;
            status: undefined | {
                action: undefined | string;
                color: undefined | string;
                name: undefined | string;
                percentage: undefined | number;
            };
            subscriptionEnabled: undefined | boolean;
            taskMarker: undefined | string;
            taskType: undefined | string;
            type:
                | TASK
                | FUNC
                | MAIN_PROCESS_IF
                | MAIN_PROCESS
                | SCENARIO_IF
                | SCENARIO
                | SUB_PROCESS_IF
                | SUB_PROCESS
                | TRANSACTION
                | CALL_ACTIVITY
                | IF_PLACEHOLDER
                | EXTERNAL_TASK
                | SUB_SUB_CATEGORY;
            version: undefined | string;
        } & {
            column: undefined | number;
            height: number;
            kind: "shape" | "plane";
            laneId: undefined | string;
            poolId: undefined | string;
            row: undefined | number;
            type: string;
            width: number;
            x: number;
            y: number;
        }
        | {
            anchors: number[];
            isDrawing: undefined | boolean;
            kind: EDGE;
            message: undefined | {
                text: undefined | string;
                xOffset: number;
                yOffset: number;
            };
            messageVisibleKind: undefined | string;
            points: number[];
            status: undefined | {
                color: string;
            };
            type: string;
        }
        | {
            columnSpan: number;
            rotation: number;
            rowSpan: number;
            text: string;
            type: LABEL;
        } & {
            column: undefined | number;
            height: number;
            kind: "shape" | "plane";
            laneId: undefined | string;
            poolId: undefined | string;
            row: undefined | number;
            type: string;
            width: number;
            x: number;
            y: number;
        }
        | {
            type: string;
            typeDisplayName: string;
        }
Returns void
- Defined in src/ts/app.ts:1135

addEmptyAnnotation

addEmptyAnnotation(relatedElement): void
Parameters
- relatedElement: any
Returns void
- Defined in src/ts/app.ts:550

addEmptyAnnotationToEntity

addEmptyAnnotationToEntity(entityId): void
Adds a new annotation to the entity.
Parameters
- entityId: string
Returns void
- Defined in src/ts/app.ts:1114

addEntity

addEntity(entity): void
Internal
TODO : Move to entity manager
Parameters
- entity: Entity<Spec>
Returns void
- Defined in src/ts/app.ts:918

addKpi

addKpi(kpis): void
Adds a KPI to the task entity and keep existing ones.
Parameters
- kpis: KpiValueSpec
  The KPI value specification.
Returns void
- Defined in src/ts/app.ts:487

centerStage

centerStage(): void
Centers the stage.

Returns void
- Defined in src/ts/app.ts:725

deleteAnnotationFromEntity

deleteAnnotationFromEntity(entityId, annotationId): void
Deletes an annotation from the entity.
Parameters
- entityId: string
  The ID of the entity.
- annotationId: string
  The ID of the annotation to delete.
Returns void
- Defined in src/ts/app.ts:1124

disableEntities

disableEntities(entityIds): void
Disables the entities with the specified IDs.
Parameters
- entityIds: string[]
  An array of entity IDs to disable.
Returns void
- Defined in src/ts/app.ts:1086

dispose

dispose(): void
Internal
Disposes the app and cleans up any resources.

Returns void
- Defined in src/ts/app.ts:1158

editKpi

editKpi(kpis): void
This is an alias for setKpi.
Parameters
- kpis: KpiValueSpec
  The KPI value specification.
Returns void
- Defined in src/ts/app.ts:500

enableEntities

enableEntities(entityIds): void
Enables the entities with the specified IDs.
Parameters
- entityIds: string[]
  An array of entity IDs.
Returns void
- Defined in src/ts/app.ts:1100

getCanvas

getCanvas(): HTMLDivElement
Internal
Retrieves the canvas element.

Returns HTMLDivElement
The canvas element.
- Defined in src/ts/app.ts:685

getCanvasId

getCanvasId(): string
Internal
Returns string
- Defined in src/ts/app.ts:692

getConfiguration

getConfiguration(): "horizontal" | "vertical"
Internal
Retrieves the configuration (vertical or horizontal).

Returns "horizontal" | "vertical"
The configuration.
- Defined in src/ts/app.ts:702

getCounterpartsData

getCounterpartsData(): null | {
counterparts: {};
}
Retrieves the counterparts data (the current spec loaded).

Returns null | {
counterparts: {};
}
- Defined in src/ts/app.ts:557

getData

getData(): null | {
    configuration: {
        primary: undefined | number;
        secondary: undefined | number;
        vertical: boolean;
    }[];
    elements: {
        attachments: undefined | {
            title: string;
            type: string;
            typeDisplayName: string | {
                values: {
                    lcid: ...;
                    value: ...;
                }[];
            };
            url: string;
        }[];
        attributeDisplays: undefined | {
            anchor: undefined | string;
            height: number;
            horizontalAlignment: string;
            key: string;
            rotation: number;
            verticalAlignment: string;
            width: number;
            xOffset: number;
            yOffset: number;
        }[];
        attributes: undefined | {
            key: string;
            values: {
                lcid: number;
                value: unknown;
            }[];
        }[];
        containerId: undefined | string;
        id: undefined | string;
        properties:
            | {
                evType: undefined | string;
                type:
                    | EV_START
                    | EV_START_NON_INTERRUPTING
                    | EV_INTERMEDIATE_NON_INTERRUPTING
                    | EV_END
                    | EV_INTERMEDIATE;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                columnSpan: number;
                rowSpan: number;
                type: POOL;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                columnSpan: number;
                isEmpty: undefined | boolean;
                rowSpan: number;
                type: LANE;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                type: CONDITION;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                type: RULE_OR | RULE_XOR | RULE_AND;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                decorations: undefined | {
                    key: string;
                    value: number;
                }[];
                detailContent: undefined | string;
                kpis: undefined | {
                    status: string;
                };
                processMarker: undefined | string;
                requestEnabled: undefined | boolean;
                source: undefined | string;
                status: undefined | {
                    action: undefined | string;
                    color: undefined | string;
                    name: undefined | string;
                    percentage: undefined | number;
                };
                subscriptionEnabled: undefined | boolean;
                taskMarker: undefined | string;
                taskType: undefined | string;
                type:
                    | TASK
                    | FUNC
                    | MAIN_PROCESS_IF
                    | MAIN_PROCESS
                    | SCENARIO_IF
                    | SCENARIO
                    | SUB_PROCESS_IF
                    | SUB_PROCESS
                    | TRANSACTION
                    | CALL_ACTIVITY
                    | IF_PLACEHOLDER
                    | EXTERNAL_TASK
                    | SUB_SUB_CATEGORY;
                version: undefined | string;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                anchors: number[];
                isDrawing: undefined | boolean;
                kind: EDGE;
                message: undefined | {
                    text: undefined | string;
                    xOffset: number;
                    yOffset: number;
                };
                messageVisibleKind: undefined | string;
                points: number[];
                status: undefined | {
                    color: string;
                };
                type: string;
            }
            | {
                columnSpan: number;
                rotation: number;
                rowSpan: number;
                text: string;
                type: LABEL;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            };
        related: undefined | {
            ids: string[];
            key: string;
            shortKey: undefined | string;
        }[];
        shapeId: undefined | string;
        source: undefined | {
            id: undefined | string;
            port: string;
            portOffset: undefined | number;
            portRatio: undefined | number;
            shapeId: undefined | string;
        };
        target: undefined | {
            id: undefined | string;
            port: string;
            portOffset: undefined | number;
            portRatio: undefined | number;
            shapeId: undefined | string;
        };
        versionId: undefined | string;
    }[];
    relatedElements: undefined | {
        attributes: undefined | {
            key: string;
            values: {
                lcid: number;
                value: unknown;
            }[];
        }[];
        id: undefined | string;
        properties:
            | {
                evType: undefined | string;
                type:
                    | EV_START
                    | EV_START_NON_INTERRUPTING
                    | EV_INTERMEDIATE_NON_INTERRUPTING
                    | EV_END
                    | EV_INTERMEDIATE;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                columnSpan: number;
                rowSpan: number;
                type: POOL;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                columnSpan: number;
                isEmpty: undefined | boolean;
                rowSpan: number;
                type: LANE;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                type: CONDITION;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                type: RULE_OR | RULE_XOR | RULE_AND;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                decorations: undefined | {
                    key: ...;
                    value: ...;
                }[];
                detailContent: undefined | string;
                kpis: undefined | {
                    status: string;
                };
                processMarker: undefined | string;
                requestEnabled: undefined | boolean;
                source: undefined | string;
                status: undefined | {
                    action: (...) | (...);
                    color: (...) | (...);
                    name: (...) | (...);
                    percentage: (...) | (...);
                };
                subscriptionEnabled: undefined | boolean;
                taskMarker: undefined | string;
                taskType: undefined | string;
                type:
                    | TASK
                    | FUNC
                    | MAIN_PROCESS_IF
                    | MAIN_PROCESS
                    | SCENARIO_IF
                    | SCENARIO
                    | SUB_PROCESS_IF
                    | SUB_PROCESS
                    | TRANSACTION
                    | CALL_ACTIVITY
                    | IF_PLACEHOLDER
                    | EXTERNAL_TASK
                    | SUB_SUB_CATEGORY;
                version: undefined | string;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                anchors: number[];
                isDrawing: undefined | boolean;
                kind: EDGE;
                message: undefined | {
                    text: undefined | string;
                    xOffset: number;
                    yOffset: number;
                };
                messageVisibleKind: undefined | string;
                points: number[];
                status: undefined | {
                    color: string;
                };
                type: string;
            }
            | {
                columnSpan: number;
                rotation: number;
                rowSpan: number;
                text: string;
                type: LABEL;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                type: string;
                typeDisplayName: string;
            };
    }[];
}
Internal
Retrieves the data (the current spec loaded).

Returns null | {
    configuration: {
        primary: undefined | number;
        secondary: undefined | number;
        vertical: boolean;
    }[];
    elements: {
        attachments: undefined | {
            title: string;
            type: string;
            typeDisplayName: string | {
                values: {
                    lcid: ...;
                    value: ...;
                }[];
            };
            url: string;
        }[];
        attributeDisplays: undefined | {
            anchor: undefined | string;
            height: number;
            horizontalAlignment: string;
            key: string;
            rotation: number;
            verticalAlignment: string;
            width: number;
            xOffset: number;
            yOffset: number;
        }[];
        attributes: undefined | {
            key: string;
            values: {
                lcid: number;
                value: unknown;
            }[];
        }[];
        containerId: undefined | string;
        id: undefined | string;
        properties:
            | {
                evType: undefined | string;
                type:
                    | EV_START
                    | EV_START_NON_INTERRUPTING
                    | EV_INTERMEDIATE_NON_INTERRUPTING
                    | EV_END
                    | EV_INTERMEDIATE;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                columnSpan: number;
                rowSpan: number;
                type: POOL;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                columnSpan: number;
                isEmpty: undefined | boolean;
                rowSpan: number;
                type: LANE;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                type: CONDITION;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                type: RULE_OR | RULE_XOR | RULE_AND;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                decorations: undefined | {
                    key: string;
                    value: number;
                }[];
                detailContent: undefined | string;
                kpis: undefined | {
                    status: string;
                };
                processMarker: undefined | string;
                requestEnabled: undefined | boolean;
                source: undefined | string;
                status: undefined | {
                    action: undefined | string;
                    color: undefined | string;
                    name: undefined | string;
                    percentage: undefined | number;
                };
                subscriptionEnabled: undefined | boolean;
                taskMarker: undefined | string;
                taskType: undefined | string;
                type:
                    | TASK
                    | FUNC
                    | MAIN_PROCESS_IF
                    | MAIN_PROCESS
                    | SCENARIO_IF
                    | SCENARIO
                    | SUB_PROCESS_IF
                    | SUB_PROCESS
                    | TRANSACTION
                    | CALL_ACTIVITY
                    | IF_PLACEHOLDER
                    | EXTERNAL_TASK
                    | SUB_SUB_CATEGORY;
                version: undefined | string;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                anchors: number[];
                isDrawing: undefined | boolean;
                kind: EDGE;
                message: undefined | {
                    text: undefined | string;
                    xOffset: number;
                    yOffset: number;
                };
                messageVisibleKind: undefined | string;
                points: number[];
                status: undefined | {
                    color: string;
                };
                type: string;
            }
            | {
                columnSpan: number;
                rotation: number;
                rowSpan: number;
                text: string;
                type: LABEL;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            };
        related: undefined | {
            ids: string[];
            key: string;
            shortKey: undefined | string;
        }[];
        shapeId: undefined | string;
        source: undefined | {
            id: undefined | string;
            port: string;
            portOffset: undefined | number;
            portRatio: undefined | number;
            shapeId: undefined | string;
        };
        target: undefined | {
            id: undefined | string;
            port: string;
            portOffset: undefined | number;
            portRatio: undefined | number;
            shapeId: undefined | string;
        };
        versionId: undefined | string;
    }[];
    relatedElements: undefined | {
        attributes: undefined | {
            key: string;
            values: {
                lcid: number;
                value: unknown;
            }[];
        }[];
        id: undefined | string;
        properties:
            | {
                evType: undefined | string;
                type:
                    | EV_START
                    | EV_START_NON_INTERRUPTING
                    | EV_INTERMEDIATE_NON_INTERRUPTING
                    | EV_END
                    | EV_INTERMEDIATE;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                columnSpan: number;
                rowSpan: number;
                type: POOL;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                columnSpan: number;
                isEmpty: undefined | boolean;
                rowSpan: number;
                type: LANE;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                type: CONDITION;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                type: RULE_OR | RULE_XOR | RULE_AND;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                decorations: undefined | {
                    key: ...;
                    value: ...;
                }[];
                detailContent: undefined | string;
                kpis: undefined | {
                    status: string;
                };
                processMarker: undefined | string;
                requestEnabled: undefined | boolean;
                source: undefined | string;
                status: undefined | {
                    action: (...) | (...);
                    color: (...) | (...);
                    name: (...) | (...);
                    percentage: (...) | (...);
                };
                subscriptionEnabled: undefined | boolean;
                taskMarker: undefined | string;
                taskType: undefined | string;
                type:
                    | TASK
                    | FUNC
                    | MAIN_PROCESS_IF
                    | MAIN_PROCESS
                    | SCENARIO_IF
                    | SCENARIO
                    | SUB_PROCESS_IF
                    | SUB_PROCESS
                    | TRANSACTION
                    | CALL_ACTIVITY
                    | IF_PLACEHOLDER
                    | EXTERNAL_TASK
                    | SUB_SUB_CATEGORY;
                version: undefined | string;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                anchors: number[];
                isDrawing: undefined | boolean;
                kind: EDGE;
                message: undefined | {
                    text: undefined | string;
                    xOffset: number;
                    yOffset: number;
                };
                messageVisibleKind: undefined | string;
                points: number[];
                status: undefined | {
                    color: string;
                };
                type: string;
            }
            | {
                columnSpan: number;
                rotation: number;
                rowSpan: number;
                text: string;
                type: LABEL;
            } & {
                column: undefined | number;
                height: number;
                kind: "shape" | "plane";
                laneId: undefined | string;
                poolId: undefined | string;
                row: undefined | number;
                type: string;
                width: number;
                x: number;
                y: number;
            }
            | {
                type: string;
                typeDisplayName: string;
            };
    }[];
}
The data.
- Defined in src/ts/app.ts:546

getDisplayManager

getDisplayManager(): DisplayManager
Internal
Returns DisplayManager
- Defined in src/ts/app.ts:661

getEditorMode

getEditorMode(): boolean
Is the editor mode enabled.

Returns boolean
Editor mode status.
- Defined in src/ts/app.ts:1054

getEntities

getEntities(): Entity<Spec>[]
Internal
Returns Entity<Spec>[]
- Defined in src/ts/app.ts:430

getEntitiesManager

getEntitiesManager(): EntitiesManager
Internal
Returns EntitiesManager
- Defined in src/ts/app.ts:668

getKpis

getKpis(): Nullable<KpiSpec>
Retrieves the KPIs.

Returns Nullable<KpiSpec>
The KPIs.
- Defined in src/ts/app.ts:566

getLanguages

getLanguages(): LanguagesSpec
Retrieves the languages.

Returns LanguagesSpec
The languages specification.
- Defined in src/ts/app.ts:532

getReactComponentsManager

getReactComponentsManager(): ReactComponentsManager
Internal
Returns ReactComponentsManager
- Defined in src/ts/app.ts:675

initializeStagePosition

initializeStagePosition(): void
Internal
Initializes the stage position so it is centered on the main pool

Returns void
- Defined in src/ts/app.ts:778

loadCounterparts

loadCounterparts(obj): void
Loads a counterparts spec. Will be dynamically validated to make sure it's a valid spec. This is the same as loadCounterpartsJson but with a plain object instead of a JSON string.
Parameters
- obj: any
  The object to load.
Returns void
- Defined in src/ts/app.ts:835

loadCounterpartsJson

loadCounterpartsJson(json): void
Loads a counterparts JSON spec. Will be dynamically validated to make sure it's a valid spec.
Parameters
- json: string
  The JSON string to load.
Returns void
- Defined in src/ts/app.ts:825

loadDebugKpiJson

loadDebugKpiJson(): void
Internal
Loads the debug KPI JSON data, that is hardcoded.

Returns void
- Defined in src/ts/app.ts:794

loadJson

loadJson(json, languageConfig?): Promise<void>
Asynchronously loads a JSON spec. Will be dynamically validated to make sure it's a valid spec.
Parameters
- json: string
  The JSON string to load.
- languageConfig: boolean = true
  A boolean indicating whether to load the language configuration from inside the JSON.
Returns Promise<void>
A promise that resolves when the JSON is loaded.
- Defined in src/ts/app.ts:736

loadKpiJson

loadKpiJson(json): Promise<void>
Asynchronously loads a KPI JSON spec. Will be dynamically validated to make sure it's a valid spec.
Parameters
- json: string
  The JSON string to load.
Returns Promise<void>
A promise that resolves when the JSON is loaded.
- Defined in src/ts/app.ts:804

loadKpiObj

loadKpiObj(obj): void
Loads a KPI spec. Will be dynamically validated to make sure it's a valid spec. This is the same as loadKPIJson but with a plain object instead of a JSON string.
Parameters
- obj: any
  The object to load.
Returns void
- Defined in src/ts/app.ts:813

loadMessageFlowJson

loadMessageFlowJson(json): void
Loads a messageFlow JSON spec.
Parameters
- json: string
  The JSON string to load.
Returns void
- Defined in src/ts/app.ts:953

loadMessageFlowObj

loadMessageFlowObj(obj): void
Apply the messageFlow JSON spec to the configuration.
Parameters
- obj: any
Returns void
- Defined in src/ts/app.ts:961

loadObj

loadObj(obj, languageConfig?): Promise<void>
Loads a spec. Will be dynamically validated to make sure it's a valid spec. This is the same as loadJson but with a plain object instead of a JSON string.
Parameters
- obj: any
  The object to load.
- languageConfig: boolean = true
  A boolean indicating whether to load the language configuration from inside the JSON.
Returns Promise<void>
- Defined in src/ts/app.ts:747

loadTestCounterPartsJson

loadTestCounterPartsJson(json): void
Loads the test counterparts JSON data, that is hardcoded.
Parameters
- json: any
Returns void
- Defined in src/ts/app.ts:977

loadTestJson

loadTestJson(): void
Internal
Loads the test JSON debug data from local storage.

Returns void
- Defined in src/ts/app.ts:941

loadTestKpiJson

loadTestKpiJson(debugKpiJson): void
Internal
Loads the test KPI JSON data, that is hardcoded.
Parameters
- debugKpiJson: any
Returns void
- Defined in src/ts/app.ts:786

loadTestMessageFlowJson

loadTestMessageFlowJson(debugMessageFlowJson): void
Internal
Loads the test messageFlow JSON data.
Parameters
- debugMessageFlowJson: any
Returns void
- Defined in src/ts/app.ts:970

redo

redo(): void
Internal
Returns void
- Defined in src/ts/app.ts:1039

reload

reload(): void
Reloads the application, disposes and recreates all the entities and UI from the current loaded spec TODO : this is only based on _data which doesn't include counterparts and kpis https://github.com/CraigFeldspar/symbio/issues/715

Returns void
- Defined in src/ts/app.ts:1144

removeEntity

removeEntity(entity): void
Internal
TODO : Move to entity manager
Parameters
- entity: Entity<Spec>
Returns void
- Defined in src/ts/app.ts:927

removeKpi

removeKpi(id): void
Removes a KPI from the task entity with the specified ID.
Parameters
- id: string
  The ID of the entity.
Returns void
- Defined in src/ts/app.ts:509

removeKpis

removeKpis(): void
Removes KPIs from all task entities.

Returns void
- Defined in src/ts/app.ts:519

select

select(entityId): void
Selects an entity based on its ID.
Parameters
- entityId: string
  The ID of the entity to be selected.
Returns void
- Defined in src/ts/app.ts:992

setCenteringMode

setCenteringMode(value): void
Sets the centering mode.
Parameters
- value: boolean
  The va lue indicating whether centering is enabled or not.
Returns void
- Defined in src/ts/app.ts:1077

setConfiguration

setConfiguration(configuration): void
Internal
Parameters
- configuration: "horizontal" | "vertical"
Returns void
- Defined in src/ts/app.ts:709

setContextMenuSearchResults

setContextMenuSearchResults(groupId, results): void
Sets the search results for the context menu. Used as a response to the search bar input.
Parameters
- groupId: string
  The ID of the search bar group.
- results: ContextMenuAsyncSearchResult[]
  The search results to be set.
Returns void
- Defined in src/ts/app.ts:902

setEditorMode

setEditorMode(value, opts?): void
Enables/disables the editor mode
Parameters
- value: boolean
- Optionalopts: SetEditorModeOptions
Returns void
- Defined in src/ts/app.ts:1068

setKpi

setKpi(kpis): void
Sets the KPI for a given task entity and replaces them all.
Parameters
- kpis: KpiValueSpec
  The KPI value specification.
Returns void
- Defined in src/ts/app.ts:475

setKpis

setKpis(kpis): void
Sets the KPIs
Parameters
- kpis: Nullable<KpiSpec>
  The KPI specification to set.
Returns void
- Defined in src/ts/app.ts:575

setLanguages

setLanguages(languages): void
Sets the languages for the application. Will not reload the application.
Parameters
- languages: LanguagesSpec
  The languages specification.
Returns void
- Defined in src/ts/app.ts:439

setPrimaryLanguage

setPrimaryLanguage(language): void
Sets the primary language for the application. Will reload the application
Parameters
- language: number
  The language to set as the primary language.
Returns void
- Defined in src/ts/app.ts:452

setScrolling

setScrolling(enabled): void
Enables or disables scrolling.
Parameters
- enabled: boolean
  A boolean value indicating whether scrolling should be enabled or disabled.
Returns void
- Defined in src/ts/app.ts:718

setSecondaryLanguage

setSecondaryLanguage(language): void
Sets the secondary language for the application. Will reload the application
Parameters
- language: number
  The language code for the secondary language.
Returns void
- Defined in src/ts/app.ts:462

start

start(canvasId): void
Internal
Starts the app rendering loop.
Parameters
- canvasId: string
Returns void
- Defined in src/ts/app.ts:1168

startEntityLabelEdition

startEntityLabelEdition(shapeId): void
Focus a given entity and start the label edition (display the edition textarea)
Parameters
- shapeId: string
Returns void
- Defined in src/ts/app.ts:1004

svgExport

svgExport(): void
Exports the current state of the application as an SVG.

Returns void
- Defined in src/ts/app.ts:422

toggleFocusablePlanes

toggleFocusablePlanes(focusable?): void
Enable or disable planes focus

When disabled, planes won't be focusable and won't be highlighted when hovered, clicking on a plane label won't display its related context menu

You can use the VITE_PLANES_SELECTION_ENABLED env variable as well
Parameters
- focusable: boolean = !Config.PLANES_SELECTION_ENABLED
Returns void
- Defined in src/ts/app.ts:1017

toggleToolbar

toggleToolbar(enable?): void
Toggle the toolbar visibility.
Parameters
- enable: boolean = !Config.ENABLE_TOOLBAR
Returns void
- Defined in src/ts/app.ts:1218

undo

undo(): void
Internal
Returns void
- Defined in src/ts/app.ts:1025

update

update(obj): Promise<void>
Same method as updateJson but with a plain object instead of a JSON string.
Parameters
- obj: any
  The object to be updated.
Returns Promise<void>
void
- Defined in src/ts/app.ts:890

updateCounterparts

updateCounterparts(counterparts, diff?): void
Update all the counterparts, or a single entity counterparts. Counterparts can be provided as a string or an object.

this.updateCounterparts(counterparts, false) // Patch the counterparts of the provided entities this.updateCounterparts(counterparts, true) // Update all the counterparts
Parameters
- counterparts: any
  The counterparts to update.
- diff: boolean = false
  A boolean indicating whether to update all the counterparts or just the provided ones.
Returns void
- Defined in src/ts/app.ts:849

updateJson

updateJson(json): Promise<void>
Updates the JSON object with the provided data. All the entities that are present in the JSON will be updated. All the entities that are not present in the JSON will be removed.
Parameters
- json: any
  The JSON string to be parsed and updated.
Returns Promise<void>
void
- Defined in src/ts/app.ts:879

usingLoop

usingLoop(): void
Returns void
- Defined in src/ts/app.ts:405

Class App

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Returns App

Properties

Internal__mountedId

InternalassetManager

InternalcallbackScenario

InternallaunchAnchoringTestApp

InternallaunchDrawTestApp

InternallaunchGeneralTestApp

InternallaunchTextTestApp

InternalmockAPI

InternalonAnimationFrameObservable

InternalonContextMenuChangedObservable

onContextMenuSearchResultsChangeObservable

onCounterpartsAction

Deprecated

onDeletionObservable

InternalonEditorModeChangedObservable

InternalonEntityDebugDetailsBoxChangedObservable

InternalonEntityReadyObservable

InternalonIconsObservable

onLabelEditedObservable

InternalonLabelUIEditObservable

onLevelOfDetailChangedObservable

onMessageFlowAddedObservable

InternalonPlaneAddedObservable

onRequestObservable

onSelectionObservable

onSubscriptionObservable

InternalonToolbarChangedObservable

InternalonTooltipChangedObservable

onUserAction

onZoomChangedObservable

selectedEntity

stagePositionChangedObservable

InternaltestHelpers

Accessors

annotationsManager

Returns AnnotationsManager

dataManager

Returns default

display

Returns DisplayManager

edition

Returns EditionManager

editionManager

Returns EditionManager

entityManager

Returns EntitiesManager

loader

Returns Loader

messageFlowManager

Returns MessageFlowManager

reactComponents

Returns ReactComponentsManager

renderer

Returns IRenderer

StaticVersion

Returns string

Methods

addAnnotationToEntity

Parameters

attributes: undefined | { key: string; values: { lcid: number; value: unknown; }[]; }[]

id: undefined | string

Returns void

addEmptyAnnotation

Parameters

Returns void

addEmptyAnnotationToEntity

Parameters

Returns void

addEntity

Parameters

`Internal`__mountedId

`Internal`assetManager

`Internal`callbackScenario

`Internal`launchAnchoringTestApp

`Internal`launchDrawTestApp

`Internal`launchGeneralTestApp

`Internal`launchTextTestApp

`Internal`mockAPI

`Internal`onAnimationFrameObservable

`Internal`onContextMenuChangedObservable

`Internal`onEditorModeChangedObservable

`Internal`onEntityDebugDetailsBoxChangedObservable

`Internal`onEntityReadyObservable

`Internal`onIconsObservable

`Internal`onLabelUIEditObservable

`Internal`onPlaneAddedObservable

`Internal`onToolbarChangedObservable

`Internal`onTooltipChangedObservable

`Internal`testHelpers

`Static`Version

attributes: undefined | {
key: string;
values: {
lcid: number;
value: unknown;
}[];
}[]

Returns null | {
counterparts: {};
}