@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/surface-renderer/plugins/snaplines/snaplines-plugin.d.ts

@@ -0,0 +1,128 @@
+import { VisuallyJSDOMElement } from "../../../element-facade";
+import { BOTTOM, CENTER, H, LEFT, RIGHT, TOP, V } from "../../../../core";
+import { Surface } from "../../surface";
+import { PanZoom } from "../../../pan-zoom";
+import { ViewportElement } from "../../../../ui";
+import { BrowserElement } from "../../../util";
+import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../../../plugins";
+/**
+ * Options for the {@link SnaplinesPlugin}
+ * @group Plugins
+ * @category Snaplines
+ */
+export interface SnaplinesPluginOptions extends BrowserUIPluginOptions {
+    /**
+     * The tolerance either side of a snapline inside which an element must be before the snapline is activated. Defaults to 10 pixels (either side of the line).
+     */
+    tolerance?: number;
+    /**
+     * Whether or not to show center snaplines. Defaults to true.
+     */
+    showCenters?: boolean;
+    /**
+     * Whether or not to show edge snaplines. Defaults to true.
+     */
+    showEdges?: boolean;
+    /**
+     * Defaults to true. If false, you can start the plugin in disabled mode.
+     */
+    enabled?: boolean;
+}
+interface SnapRange {
+    start: number;
+    end: number;
+    objId: string;
+    line: VisuallyJSDOMElement;
+    el: VisuallyJSDOMElement;
+    orientation: typeof H | typeof V;
+}
+interface VerticalSnapRange extends SnapRange {
+    position: typeof TOP | typeof CENTER | typeof BOTTOM;
+}
+interface HorizontalSnapRange extends SnapRange {
+    position: typeof LEFT | typeof CENTER | typeof RIGHT;
+}
+/**
+ * Assigned to both horizontal and vertical snaplines when active
+ * @cssClass
+ * @context snaplines
+ */
+export declare const CLASS_SNAPLINE = "vjs-snapline";
+/**
+ * Assigned to vertical snaplines when active
+ * @cssClass
+ * @context snaplines
+ */
+export declare const CLASS_SNAPLINE_VERTICAL = "vjs-snapline-vertical";
+/**
+ * Assigned to horizontal snaplines when active
+ * @cssClass
+ * @context snaplines
+ */
+export declare const CLASS_SNAPLINE_HORIZONTAL = "vjs-snapline-horizontal";
+/**
+ * Assigned to both horizontal and vertical snaplines when the elements are exactly aligned
+ * @cssClass
+ * @context snaplines
+ */
+export declare const CLASS_SNAPLINE_EXACT = "vjs-snapline-exact";
+/**
+ * Assigned to an element attached to an active snapline
+ * @cssClass
+ * @context snaplines
+ */
+export declare const CLASS_SNAPLINE_ACTIVE = "vjs-snapline-active";
+/**
+ * Assigned to an element attached to an active snapline and the elements on the snapline are exactly aligned (parsed to integers).
+ * @cssClass
+ * @context snaplines
+ */
+export declare const CLASS_SNAPLINE_ACTIVE_EXACT = "vjs-snapline-active-exact";
+/**
+ * Shows snaplines when objects are being dragged.
+ * @group Plugins
+ * @category Snaplines
+ */
+export declare class SnaplinesPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<SnaplinesPluginOptions> {
+    static type: string;
+    id: "snaplines";
+    /** @internal */
+    surface: Surface;
+    /** @internal */
+    panZoom: PanZoom;
+    /** @internal */
+    tolerance: number;
+    /** @internal */
+    showCenters: boolean;
+    /** @internal */
+    showEdges: boolean;
+    /** @internal */
+    verticalRanges: Array<VerticalSnapRange>;
+    /** @internal */
+    horizontalRanges: Array<HorizontalSnapRange>;
+    /** @internal */
+    selectedRanges: Array<SnapRange>;
+    /** @internal */
+    focus: ViewportElement<BrowserElement>;
+    private enabled;
+    setEnabled(e: boolean): void;
+    /**
+     * @internal
+     * @param surface
+     * @param options
+     */
+    initialise(surface: Surface, options: SnaplinesPluginOptions): boolean;
+    private _activateRange;
+    private _clearSelectedRanges;
+    private _createHorizontal;
+    private _createVertical;
+    /**
+     * @internal
+     */
+    destroy(): void;
+    /**
+     * @internal
+     */
+    reset(): void;
+}
+export {};

package/types/browser-ui/surface-renderer/plugins/vertex-drawing/definitions.d.ts

@@ -0,0 +1,90 @@
+import { PointXY, Size, Node, Group, ObjectData, Vertex } from "../../../../core";
+import { BrowserElement } from "../../../util";
+import { BrowserUIPluginOptions } from "../../../plugins";
+/**
+ * Added to the lasso used by the vertex drawing plugin.
+ * @group Plugins
+ * @category Vertex Drawing
+ * @constant
+ */
+export declare const CLASS_VERTEX_DRAWING_LASSO = "vjs-vertex-drawing-lasso";
+/**
+ * Added to any groups/nodes which have been lassoed by the current drawing operation and will be added to the new group being drawn
+ * @group Plugins
+ * @category Vertex Drawing
+ */
+export declare const CLASS_VERTEX_DRAWING_GROUP_CHILD_CANDIDATE = "vjs-group-candidate-child";
+/**
+ * Defines a function used by the vertex drawing plugin to generate an `objectType` (Group/Node) and `type` (app-specific) for a vertex that is about to be drawn.
+ * @group Plugins
+ * @category Vertex Drawing
+ */
+export type VertexDrawingPluginTypeGenerator = (origin: PointXY, e: MouseEvent) => {
+    objectType: typeof Node.objectType | typeof Group.objectType;
+    type: string;
+    data?: ObjectData;
+};
+/**
+ * Options for the vertex drawing plugin
+ * @group Plugins
+ * @category Vertex Drawing
+ */
+export interface VertexDrawingPluginOptions extends BrowserUIPluginOptions {
+    /**
+     * The type identifier for new groups. If you have also provided a typeGenerator this will be ignored.  If you have not provided a typeGenerator but you have provided a nodeType, this will be ignored.
+     */
+    groupType?: string;
+    /**
+     * The type identifier for new nodes. If you have also provided a typeGenerator this will be ignored.
+     */
+    nodeType?: string;
+    /**
+     * Defaults to false, meaning the lasso is drawn as a rectangle. If true, the lasso is drawn as a set of masks, with the lasso area drawn as a "hole" in the masks.
+     */
+    invert?: boolean;
+    /**
+     * When true (which is the default) the lasso exits after a group has been drawn
+     */
+    autoExit?: boolean;
+    /**
+     * The minimum size for vertices. If your user draws a vertex smaller than this it will be discarded. Defaults to a width/height of 50 pixels.
+     */
+    minSize?: Size;
+    /**
+     * Optional function that will be invoked when a new drag commences, and which is responsible for returning the type of object to add (Node or Group), as well as that object's own type, and, optionally, an initial payload for the new object.
+     */
+    typeGenerator?: VertexDrawingPluginTypeGenerator;
+    /**
+     * Defaults to false. When true, users can click on the canvas to "draw" a new element, and the plugin will use a default size for the element. When this flag is set, drag to add is still also enabled.
+     */
+    allowClickToAdd?: boolean;
+    /**
+     * Defaults to false. When true, the plugin only supports click to add new vertices, not drag. This flag is forced to true if the associated UI does not have `useModelForSizes` set, since there is no point in allowing a user to drag a vertex to some size if its not going to be honoured. When you set this flag and associated UI does have `useModelForSizes` set, the plugin will use default sizes for new nodes/groups.
+     */
+    clickToAddOnly?: boolean;
+    /**
+     * Optional default size for groups, used when `allowClickToAdd` is set to true. Defaults to width and height of 250 pixels.
+     */
+    defaultGroupSize?: Size;
+    /**
+     * Optional default size for nodes, used when `allowClickToAdd` is set to true. Defaults to width and height of 80 pixels.
+     */
+    defaultNodeSize?: Size;
+    /**
+     * A function that will be invoked at the start of a drawing operation, and can return an element to draw into the lasso. This is an optional function; if you don't provide it VisuallyJs will draw a basic SVG rectangle to indicate the drawing area.
+     */
+    vertexPreviewGenerator?: (p: PointXY, e: MouseEvent) => BrowserElement;
+    /**
+     * A function that is invoked during mouse drag, to be used in conjunction with `vertexPreviewGenerator`. This function gives you a hook to use to make any changes to your preview element, should you need to. This is optional.
+     */
+    vertexPreviewUpdater?: (p: PointXY, size: Size, el: BrowserElement) => any;
+    /**
+     * Optional extra class(es) to set on the lasso used for drawing.
+     */
+    lassoClass?: string;
+    /**
+     * Callback to invoke when a vertex has been added
+     * @param v
+     */
+    onVertexAdded?: (v: Vertex) => any;
+}

package/types/browser-ui/surface-renderer/plugins/vertex-drawing/index.d.ts

@@ -0,0 +1,2 @@
+export * from './definitions';
+export * from "./vertex-drawing-plugin";

package/types/browser-ui/surface-renderer/plugins/vertex-drawing/vertex-drawing-plugin.d.ts

@@ -0,0 +1,64 @@
+import { Vertex } from "../../../../core";
+import { Surface } from "../../surface";
+import { BaseBrowserUIPlugin, BrowserUIPlugin } from "../../../plugins";
+import { VertexDrawingPluginOptions } from "./definitions";
+/**
+ * A plugin that allows the user to draw vertices with the mouse, and when dragging a new group, existing groups and nodes can be snagged and added to the group.
+ * @group Plugins
+ * @category Vertex Drawing
+ */
+export declare class VertexDrawingPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<VertexDrawingPluginOptions> {
+    static type: string;
+    id: "vertexDrawing";
+    surface: Surface;
+    private lasso;
+    autoExit: boolean;
+    private typeGenerator;
+    private groupType;
+    private nodeType;
+    private defaultGroupSize;
+    private defaultNodeSize;
+    private _allowClickToAdd;
+    private _clickToAddOnly;
+    private _parentGroupTarget;
+    private _objectTypeToCreate;
+    private _typeToCreate;
+    private _newObjectPayload;
+    $onVertexAdded: (v: Vertex) => any;
+    /**
+     * @internal
+     */
+    private _minSize;
+    private vertexSelection;
+    private selectedElements;
+    destroy(): void;
+    private _deriveTypesToCreate;
+    initialise(surface: Surface, options: VertexDrawingPluginOptions): boolean;
+    /**
+     * Does the work of adding a vertex, node or group.
+     * @param origin
+     * @param sizeOnCanvas
+     * @internal
+     */
+    private _doAddVertex;
+    private _generateNewObjectPayload;
+    /**
+     * Filters the selection so that any nodes/groups which are descendants of some other group in the selection are removed.
+     * We want to retain the members of any group we add to a new group, not add those members to this new group
+     * @private
+     */
+    private _filterVertexSelection;
+    /**
+     * Adds a new group to the model.
+     * @param surface
+     * @param xy
+     * @param sizeOnCanvas
+     * @private
+     */
+    private _addNewGroup;
+    private _addNewNode;
+    private _resetSelectedElements;
+    reset(): void;
+    activated(): void;
+    deactivated(): void;
+}

package/types/browser-ui/surface-renderer/shape-palette-options.d.ts

@@ -0,0 +1,127 @@
+import { Group, ObjectData, Size, Node } from "../../core";
+import { ShapeLibrary } from "../shape-library";
+import { DataGeneratorFunction, OnVertexAddedCallback } from "../definitions";
+import { PaletteMode } from "../components";
+/**
+ * Options for a shape library palette.
+ * @group Components
+ * @category ShapePalette
+ */
+export interface ShapePaletteOptions<T extends ObjectData> {
+    /**
+     * The element to draw the palette into.
+     */
+    container: HTMLElement;
+    /**
+     * The shape library to render. If you do not provide this the palette gets it from the UI it is attached to.
+     */
+    shapeLibrary?: ShapeLibrary<T>;
+    /**
+     * Optional size to use for dragged elements.
+     */
+    dragSize?: Size;
+    /**
+     * Optional fill color to use for elements in the palette. This should be in RGB format, _not_ a color like 'white' or 'cyan' etc. Defaults to "#FFFFFF".
+     */
+    fill?: string;
+    /**
+     * Optional color to use for elements in the palette. Should be in RGB format.  Defaults to "#000000".
+     */
+    outline?: string;
+    /**
+     * Optional outline width (in pixels) to use for elements in the palette. Defaults to 2.
+     */
+    outlineWidth?: number;
+    /**
+     * Message to use for the 'show all' option in the shape set drop down when there is more than one set of shapes. Defaults to `Show all`.
+     */
+    showAllMessage?: string;
+    /**
+     * When true (which is the default), a newly dropped vertex will be set as the underlying model's selection.
+     */
+    selectAfterDrop?: boolean;
+    /**
+     * Indicates two things: first, when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Secondly, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
+     */
+    inspector?: boolean;
+    /**
+     * Stroke width to use for shapes in palette. Defaults to 1.
+     */
+    paletteStrokeWidth?: number;
+    /**
+     * Optional data generator to allow you to specify initial data for some element to be dragged. Note that you cannot override the object's `type` with this function. The palette will set the new object's type to match the type of the element that the user is dragging from the palette.
+     */
+    dataGenerator?: DataGeneratorFunction<T>;
+    /**
+     * Optional size to use for icons. Defaults to 150x100 pixels. If you provide this but not `dragSize` this size will also be used for an icon that is being dragged.
+     */
+    iconSize?: Size;
+    /**
+     * Optional ID of the first set to show, hiding the others.
+     */
+    initialSet?: string;
+    /**
+     * Optional callback to invoke when a new vertex has been added
+     * @param v Vertex that was added.
+     * @param pos Position on canvas that the vertex was added at
+     * @param dropTarget
+     */
+    onVertexAdded?: OnVertexAddedCallback;
+    /**
+     * Optionally show each shape icon's label underneath it
+     */
+    showLabels?: boolean;
+    /**
+     * Mode to operate in - 'drag' or 'draw'. Defaults to 'drag' (PALETTE_MODE_DRAG).
+     */
+    mode?: PaletteMode;
+    /**
+     * When in tap mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true,
+     * the drawing method also still works)
+     */
+    allowClickToAdd?: boolean;
+    /**
+     * Defaults to true: when in 'tap' mode and a new group/node has been drawn on the canvas, the UI is set back to pan mode.
+     */
+    autoExitDrawMode?: boolean;
+    /**
+     * Optional function that is invoked at the start of a drag, and which identifies allowed drop targets. Each target - the canvas, nodes and groups - is passed in turn to this method; returning false indicates that the given target is not valid for that drag.
+     * @param candidate
+     * @param target
+     * @param onCanvas
+     */
+    canDrop?: (candidate: Node | Group, target?: Node | Group, onCanvas?: boolean) => boolean;
+    /**
+     * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
+     */
+    preparedShapes?: Array<PreparedShape>;
+}
+/**
+ * Defines a wrapper around a shape with some `type` and `category` that adds properties (to be used to define the shape's appearance) and, optionally, the shape's initial size.
+ */
+export interface PreparedShape {
+    /**
+     * The type of the underlying shape
+     */
+    type: string;
+    /**
+     * The shape set the underlying shape is sourced from
+     */
+    category: string;
+    /**
+     * The ID for this prepared shape. Used internally, but ensure you provide a unique value.
+     */
+    shapeId: string;
+    /**
+     * Label to show for the prepared shape in a palette
+     */
+    label: string;
+    /**
+     * Optional initial size to use for the shape
+     */
+    size?: Size;
+    /**
+     * Properties with which to configure the shape when it is created.
+     */
+    properties: ObjectData;
+}

package/types/browser-ui/surface-renderer/shape-palette.d.ts

@@ -0,0 +1,55 @@
+import { ObjectData } from "../../core";
+import { DataGeneratorFunction } from "../definitions";
+import { Palette } from "../components/palette";
+import { BrowserUiRecado } from "../templating/browser-ui-recado";
+import { BrowserUI } from "../browser-visuallyjs-instance";
+import { PreparedShape, ShapePaletteOptions } from "./shape-palette-options";
+/**
+ * @internal
+ */
+export declare const ATTRIBUTE_DATA_SHAPE_ID = "data-shape-id";
+/**
+ * A palette for drag/drop that renders the contents of a shape library.
+ * @group Components
+ * @category ShapePalette
+ */
+export declare class ShapePalette<T extends ObjectData> {
+    private ui;
+    _$_templateEngine: BrowserUiRecado;
+    _$_palette: Palette<ObjectData>;
+    _$_userDataGenerator: DataGeneratorFunction<T>;
+    /**
+     * @internal
+     */
+    $preparedShapes: Array<PreparedShape>;
+    private onVertexAdded;
+    private palette;
+    private $shapeLibrary;
+    /**
+     * Constructor for the palette.
+     * @param options Options for the palette
+     */
+    constructor(ui: BrowserUI, options: ShapePaletteOptions<T>);
+    private _getSelectedVertices;
+    private _getFilter;
+    /**
+     * Sets the visible set to be the given setId, for some parent. This method is called in response to a user selecting something in a drop down, and is also called from _selectVisibleSet, where a user programmatically specifies which set they wish to set as the current visible.
+     * @param setId
+     * @param parent
+     * @internal
+     */
+    private _setVisibleSet;
+    /**
+     * Sets the visible set to be the given setId, for some parent, and also updates the dropdown filter for that set to show the correct selected value. This method is called when programmatically selecting some visible set.
+     * @param setId
+     * @param parent
+     * @internal
+     */
+    private _selectVisibleSet;
+    /**
+     * Selects some set to be the currently visible set, activating its parents if it is a nested set. If you pass in a
+     * null value for the set id, all sets will be shown.
+     * @param id
+     */
+    setCurrentSet(id: string | null): void;
+}

package/types/browser-ui/surface-renderer/surface-decorator.d.ts

@@ -0,0 +1,35 @@
+import { Decorator, IDecorator } from "./decorators";
+import { Surface } from "./surface";
+import { BrowserElement } from "../util";
+/**
+ * A spec for a Decorator in "full" format, ie consisting of its `type`, an `options` object and an optional ID.
+ * @group Components
+ * @category Decorators
+ */
+export type FullDecoratorSpec = {
+    /**
+     * Decorator type
+     */
+    type: string;
+    /**
+     * Options for the decorator
+     */
+    options: Record<string, any>;
+    /**
+     * Optional id, with which you can retrieve the decorator from the UI
+     */
+    id?: string;
+};
+/**
+ * A spec for a Decorator - either in "full" format or just as the Decorator's name.
+ * @group Components
+ * @category Decorators
+ */
+export type DecoratorSpec = string | FullDecoratorSpec;
+/**
+ * @internal
+ * @param dlist
+ * @param adapter
+ * @param container
+ */
+export declare function _initialiseDecorators(dlist: Array<DecoratorSpec | Decorator | IDecorator<BrowserElement>>, adapter: Surface, container: BrowserElement): Array<Decorator>;

package/types/browser-ui/surface-renderer/surface-events.d.ts

@@ -0,0 +1,9 @@
+import { BindableRenderEvent } from "../../ui";
+/**
+ * Defines the available mappings for the `events` Surface render parameter. These are events fired by the Surface itself. Use `ViewEventOptions` for the events that can be mapped in a view.
+ * @group Components
+ * @category Surface
+ */
+export type SurfaceEventOptions = {
+    [K in BindableRenderEvent]?: Function;
+};

package/types/browser-ui/surface-renderer/surface-render-options.d.ts

@@ -0,0 +1,125 @@
+import { ModelEventSpec, SurfaceMode } from './definitions';
+import { DecoratorSpec } from './surface-decorator';
+import { GridOptions } from "../../ui";
+import { BrowserElement } from "../util";
+import { CustomTagDefinition } from "../templating";
+import { IDecorator } from "./decorators";
+import { SurfaceEventOptions } from "./surface-events";
+import { BrowserUIOptions } from "../definitions";
+import { PanOptions, WheelOptions, ZoomOptions } from "../pan-zoom-options";
+import { EdgeSnapOptions } from "../edge-handler-base";
+import { LayoutSpec } from "../../core";
+/**
+ * This interface defines the allowed parameters on a `render` call that will create a new Surface.
+ * @group Components
+ * @category Surface
+ */
+export interface SurfaceOptions extends BrowserUIOptions {
+    /**
+     * Whether or not to disable drop targets on which an edge from some current source may not be dropped.
+     */
+    activeFiltering?: boolean;
+    /**
+     * Whether or not the edge drag/relocate handlers should support dragging edges from some element to itself. Defaults to false.
+     */
+    allowLoopbackEdges?: boolean;
+    /**
+     * Whether or not to automatically exit from 'select' mode after a lasso operation.
+     */
+    autoExitSelectMode?: boolean;
+    /**
+     * Whether or not to limit the canvas movement when dragging or zooming so that some part of the dataset is always visible. Defaults to true.
+     */
+    clamp?: boolean;
+    /**
+     * When a background is in use, whether or not to clamp movement of the canvas so that some portion of the background is always visible.
+     */
+    clampToBackground?: boolean;
+    /**
+     * When a background is in use, whether or not to clamp movement of the canvas so that the entire background is always visible.
+     */
+    clampToBackgroundExtents?: boolean;
+    /**
+     * Optional list of decorators to attach to the Surface.
+     */
+    decorators?: Array<DecoratorSpec | IDecorator<BrowserElement>>;
+    /**
+     * Options for edge snapping.
+      */
+    edgeSnap?: EdgeSnapOptions;
+    /**
+     * Whether or not to support animation of pan/zoom operations.
+     */
+    enableAnimation?: boolean;
+    /**
+     * Optional map of handlers for various events generated by the Surface.
+     */
+    events?: SurfaceEventOptions;
+    /**
+     * Options for imposing a grid onto the elements in the Surface.
+     */
+    grid?: GridOptions;
+    /**
+     * Optional ID for the Surface. Allows you to retrieve this Surface from a model's `getRenderer(id)` method.
+     */
+    id?: string;
+    /**
+     * Defines the layout to use.
+     */
+    layout?: LayoutSpec;
+    /**
+     * Defaults to false. When true, the UI treats the vertex's DOM element as the DOM element for the port if it cannot find a specific element for the port.
+     */
+    logicalPorts?: boolean;
+    /**
+     * Mode to start in. Defaults to 'pan'.
+     */
+    mode?: SurfaceMode;
+    /**
+     * Optional map of event handlers. Each entry consists of the event name, a CSS selector to target, and a callback function. Supplying this is equivalent to calling `bindModelEvent(..)` on a Surface.
+     */
+    modelEvents?: Array<ModelEventSpec>;
+    /**
+     * When true, the Surface will run a `refresh` of the underlying layout whenever a new edge is established. This defaults to false, but you might want to set this to true if you're using the Hierarchical or Hierarchy layouts, because it has a bearing on the way they paint. However, if your users are able to drag vertices around, you may not wish for the layout to move things that they have placed, which is why this defaults to false.
+     */
+    refreshLayoutOnEdgeConnect?: boolean;
+    /**
+     * Defaults to false. When true, changes to a group cause the entire surface to perform a relayout.
+     */
+    relayoutOnGroupUpdate?: boolean;
+    /**
+     * Options for the behaviour of the mousewheel (which also covers two finger scrolling on a mac trackpad)
+     */
+    wheel?: WheelOptions;
+    /**
+     * Options to control how a user manages zoom on the canvas.
+     */
+    zoom?: ZoomOptions;
+    /**
+     * Options to control how a user pans the canvas.
+     */
+    pan?: PanOptions;
+    /**
+     * If true, zoom the display so that the dataset is entirely visible after initialisation.
+     */
+    zoomToFit?: boolean;
+    /**
+     * If true, zoom the display so that the dataset is entirely visible after initialisation, but only adjust the zoom level if the dataset is not already visible at the default zoom level.
+     */
+    zoomToFitIfNecessary?: boolean;
+}
+/**
+ * Constructor options for the Surface in the browser-ui (vanilla) package.
+ * @group Components
+ * @category Surface
+ */
+export interface VanillaSurfaceOptions extends SurfaceOptions {
+    /**
+     * Optional map of custom tags to support in the templates.
+     */
+    tags?: Record<string, CustomTagDefinition>;
+    /**
+     * Optional map of template macros - small functions that can generate values for templates. Macros are a means for you to extract logic from the templates.
+     */
+    templateMacros?: Record<string, (d: any) => string>;
+}