/** * Map containing SVG paths needed by BpmnRenderer */ export default class PathMap { /** * Contains a map of path elements * *

Path definition

* A parameterized path is defined like this: *
     * 'GATEWAY_PARALLEL': {
     *   d: 'm {mx},{my} {e.x0},0 0,{e.x1} {e.x1},0 0,{e.y0} -{e.x1},0 0,{e.y1} ' +
     '-{e.x0},0 0,-{e.y1} -{e.x1},0 0,-{e.y0} {e.x1},0 z',
     *   height: 17.5,
     *   width:  17.5,
     *   heightElements: [2.5, 7.5],
     *   widthElements: [2.5, 7.5]
     * }
     * 
*

It's important to specify a correct height and width for the path as the scaling * is based on the ratio between the specified height and width in this object and the * height and width that is set as scale target (Note x,y coordinates will be scaled with * individual ratios).

*

The 'heightElements' and 'widthElements' array must contain the values that will be scaled. * The scaling is based on the computed ratios. * Coordinates on the y axis should be in the heightElement's array, they will be scaled using * the computed ratio coefficient. * In the parameterized path the scaled values can be accessed through the 'e' object in {} brackets. *

* The numbers x0, x1 respectively y0, y1, ... map to the corresponding array index. *

*/ pathMap: { EVENT_MESSAGE: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_SIGNAL: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_ESCALATION: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_CONDITIONAL: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_LINK: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_ERROR: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_CANCEL_45: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_COMPENSATION: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_TIMER_WH: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_TIMER_LINE: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_MULTIPLE: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; EVENT_PARALLEL_MULTIPLE: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; GATEWAY_EXCLUSIVE: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; GATEWAY_PARALLEL: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; GATEWAY_EVENT_BASED: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; GATEWAY_COMPLEX: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; DATA_OBJECT_PATH: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; DATA_OBJECT_COLLECTION_PATH: { d: string; height: number; width: number; heightElements: any[]; widthElements: any[]; }; DATA_ARROW: { d: string; height: number; width: number; heightElements: any[]; widthElements: any[]; }; DATA_STORE: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; TEXT_ANNOTATION: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; MARKER_SUB_PROCESS: { d: string; height: number; width: number; heightElements: any[]; widthElements: any[]; }; MARKER_PARALLEL: { d: string; height: number; width: number; heightElements: any[]; widthElements: any[]; }; MARKER_SEQUENTIAL: { d: string; height: number; width: number; heightElements: any[]; widthElements: any[]; }; MARKER_COMPENSATION: { d: string; height: number; width: number; heightElements: any[]; widthElements: any[]; }; MARKER_LOOP: { d: string; height: number; width: number; heightElements: any[]; widthElements: any[]; }; MARKER_ADHOC: { d: string; height: number; width: number; heightElements: any[]; widthElements: any[]; }; TASK_TYPE_SEND: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; TASK_TYPE_SCRIPT: { d: string; height: number; width: number; heightElements: number[]; widthElements: number[]; }; TASK_TYPE_USER_1: { d: string; }; TASK_TYPE_USER_2: { d: string; }; TASK_TYPE_USER_3: { d: string; }; TASK_TYPE_MANUAL: { d: string; }; TASK_TYPE_INSTANTIATING_SEND: { d: string; }; TASK_TYPE_SERVICE: { d: string; }; TASK_TYPE_SERVICE_FILL: { d: string; }; TASK_TYPE_BUSINESS_RULE_HEADER: { d: string; }; TASK_TYPE_BUSINESS_RULE_MAIN: { d: string; }; MESSAGE_FLOW_MARKER: { d: string; }; }; /** * Return raw path for the given ID. * * @param pathId * * @return raw path */ getRawPath: (pathId: string) => string; /** * Scales the path to the given height and width. *

Use case

*

Use case is to scale the content of elements (event, gateways) based * on the element bounding box's size. *

*

Why not transform

*

Scaling a path with transform() will also scale the stroke and IE does not support * the option 'non-scaling-stroke' to prevent this. * Also there are use cases where only some parts of a path should be * scaled.

* * @param pathId The ID of the path. * @param param

* Example param object scales the path to 60% size of the container (data.width, data.height). *

     *   {
     *     xScaleFactor: 0.6,
     *     yScaleFactor:0.6,
     *     containerWidth: data.width,
     *     containerHeight: data.height,
     *     position: {
     *       mx: 0.46,
     *       my: 0.2,
     *     }
     *   }
     *   
* *

* * @return scaled path */ getScaledPath: (pathId: string, param: any) => string; }