bpmn-visualization/dist/bpmn-visualization.esm.js

A TypeScript library for visualizing process execution data on BPMN diagrams

/*
Copyright 2020-2025 Bonitasoft S.A.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import factory from 'mxgraph';
import { debounce, throttle } from 'es-toolkit';
import { XMLParser } from 'fast-xml-parser';

var FitType;
(function (FitType) {
    FitType["None"] = "None";
    FitType["HorizontalVertical"] = "HorizontalVertical";
    FitType["Horizontal"] = "Horizontal";
    FitType["Vertical"] = "Vertical";
    FitType["Center"] = "Center";
})(FitType || (FitType = {}));
var ZoomType;
(function (ZoomType) {
    ZoomType["In"] = "in";
    ZoomType["Out"] = "out";
})(ZoomType || (ZoomType = {}));

function htmlElement(element) {
    if (element instanceof HTMLElement) {
        return element;
    }
    return document.querySelector(`#${element}`);
}

var ShapeBpmnElementKind;
(function (ShapeBpmnElementKind) {
    ShapeBpmnElementKind["LANE"] = "lane";
    ShapeBpmnElementKind["POOL"] = "pool";
    ShapeBpmnElementKind["CALL_ACTIVITY"] = "callActivity";
    ShapeBpmnElementKind["SUB_PROCESS"] = "subProcess";
    ShapeBpmnElementKind["TASK"] = "task";
    ShapeBpmnElementKind["TASK_USER"] = "userTask";
    ShapeBpmnElementKind["TASK_SERVICE"] = "serviceTask";
    ShapeBpmnElementKind["TASK_RECEIVE"] = "receiveTask";
    ShapeBpmnElementKind["TASK_SEND"] = "sendTask";
    ShapeBpmnElementKind["TASK_MANUAL"] = "manualTask";
    ShapeBpmnElementKind["TASK_SCRIPT"] = "scriptTask";
    ShapeBpmnElementKind["TASK_BUSINESS_RULE"] = "businessRuleTask";
    ShapeBpmnElementKind["GLOBAL_TASK"] = "globalTask";
    ShapeBpmnElementKind["GLOBAL_TASK_USER"] = "globalUserTask";
    ShapeBpmnElementKind["GLOBAL_TASK_MANUAL"] = "globalManualTask";
    ShapeBpmnElementKind["GLOBAL_TASK_SCRIPT"] = "globalScriptTask";
    ShapeBpmnElementKind["GLOBAL_TASK_BUSINESS_RULE"] = "globalBusinessRuleTask";
    ShapeBpmnElementKind["GROUP"] = "group";
    ShapeBpmnElementKind["TEXT_ANNOTATION"] = "textAnnotation";
    ShapeBpmnElementKind["GATEWAY_PARALLEL"] = "parallelGateway";
    ShapeBpmnElementKind["GATEWAY_EXCLUSIVE"] = "exclusiveGateway";
    ShapeBpmnElementKind["GATEWAY_INCLUSIVE"] = "inclusiveGateway";
    ShapeBpmnElementKind["GATEWAY_EVENT_BASED"] = "eventBasedGateway";
    ShapeBpmnElementKind["GATEWAY_COMPLEX"] = "complexGateway";
    ShapeBpmnElementKind["EVENT_START"] = "startEvent";
    ShapeBpmnElementKind["EVENT_END"] = "endEvent";
    ShapeBpmnElementKind["EVENT_INTERMEDIATE_CATCH"] = "intermediateCatchEvent";
    ShapeBpmnElementKind["EVENT_INTERMEDIATE_THROW"] = "intermediateThrowEvent";
    ShapeBpmnElementKind["EVENT_BOUNDARY"] = "boundaryEvent";
})(ShapeBpmnElementKind || (ShapeBpmnElementKind = {}));
var ShapeBpmnCallActivityKind;
(function (ShapeBpmnCallActivityKind) {
    ShapeBpmnCallActivityKind["CALLING_PROCESS"] = "process";
    ShapeBpmnCallActivityKind["CALLING_GLOBAL_TASK"] = "global task";
})(ShapeBpmnCallActivityKind || (ShapeBpmnCallActivityKind = {}));
var ShapeBpmnEventBasedGatewayKind;
(function (ShapeBpmnEventBasedGatewayKind) {
    ShapeBpmnEventBasedGatewayKind["Exclusive"] = "Exclusive";
    ShapeBpmnEventBasedGatewayKind["None"] = "None";
    ShapeBpmnEventBasedGatewayKind["Parallel"] = "Parallel";
})(ShapeBpmnEventBasedGatewayKind || (ShapeBpmnEventBasedGatewayKind = {}));
var ShapeBpmnEventDefinitionKind;
(function (ShapeBpmnEventDefinitionKind) {
    ShapeBpmnEventDefinitionKind["NONE"] = "none";
    ShapeBpmnEventDefinitionKind["TERMINATE"] = "terminate";
    ShapeBpmnEventDefinitionKind["CANCEL"] = "cancel";
    ShapeBpmnEventDefinitionKind["COMPENSATION"] = "compensate";
    ShapeBpmnEventDefinitionKind["CONDITIONAL"] = "conditional";
    ShapeBpmnEventDefinitionKind["ERROR"] = "error";
    ShapeBpmnEventDefinitionKind["ESCALATION"] = "escalation";
    ShapeBpmnEventDefinitionKind["LINK"] = "link";
    ShapeBpmnEventDefinitionKind["MESSAGE"] = "message";
    ShapeBpmnEventDefinitionKind["SIGNAL"] = "signal";
    ShapeBpmnEventDefinitionKind["TIMER"] = "timer";
})(ShapeBpmnEventDefinitionKind || (ShapeBpmnEventDefinitionKind = {}));
var ShapeBpmnMarkerKind;
(function (ShapeBpmnMarkerKind) {
    ShapeBpmnMarkerKind["ADHOC"] = "adhoc";
    ShapeBpmnMarkerKind["COMPENSATION"] = "compensation";
    ShapeBpmnMarkerKind["EXPAND"] = "expand";
    ShapeBpmnMarkerKind["LOOP"] = "loop";
    ShapeBpmnMarkerKind["MULTI_INSTANCE_PARALLEL"] = "multi-parallel";
    ShapeBpmnMarkerKind["MULTI_INSTANCE_SEQUENTIAL"] = "multi-sequential";
})(ShapeBpmnMarkerKind || (ShapeBpmnMarkerKind = {}));
var ShapeBpmnSubProcessKind;
(function (ShapeBpmnSubProcessKind) {
    ShapeBpmnSubProcessKind["AD_HOC"] = "adhoc";
    ShapeBpmnSubProcessKind["EMBEDDED"] = "embedded";
    ShapeBpmnSubProcessKind["EVENT"] = "event";
    ShapeBpmnSubProcessKind["TRANSACTION"] = "transaction";
})(ShapeBpmnSubProcessKind || (ShapeBpmnSubProcessKind = {}));

function convertEmptyStringAndObject(element, acceptEmptyString) {
    if (element === '') {
        return acceptEmptyString ? {} : undefined;
    }
    return element;
}
function ensureIsArray(elements, acceptEmptyString = false) {
    if (elements === undefined || elements === null) {
        return [];
    }
    return ((Array.isArray(elements) ? elements : [elements])
        .map(element => convertEmptyStringAndObject(element, acceptEmptyString))
        .filter(Boolean));
}
function filter(arrayToFilter, suffix, options) {
    const patterns = [];
    if (options === null || options === void 0 ? void 0 : options.startingWith) {
        patterns.push(`^(${options.startingWith}).*`);
    }
    else if (options === null || options === void 0 ? void 0 : options.notStartingWith) {
        patterns.push(`^(?!(${options.notStartingWith})).*`);
    }
    patterns.push(`${suffix}$`);
    const pattern = patterns.join('');
    return arrayToFilter.filter(element => ((options === null || options === void 0 ? void 0 : options.ignoreCase) ? new RegExp(pattern, 'i').test(element) : new RegExp(pattern).test(element)));
}

class ShapeUtil {
    static isEvent(kind) {
        return isKindOf(EVENT_KINDS, kind);
    }
    static eventKinds() {
        return [...EVENT_KINDS];
    }
    static isBoundaryEvent(kind) {
        return ShapeBpmnElementKind.EVENT_BOUNDARY === kind;
    }
    static isStartEvent(kind) {
        return ShapeBpmnElementKind.EVENT_START === kind;
    }
    static isCatchEvent(kind) {
        return ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH === kind || ShapeBpmnElementKind.EVENT_BOUNDARY === kind || ShapeBpmnElementKind.EVENT_START === kind;
    }
    static isIntermediateCatchEvent(kind) {
        return ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH === kind;
    }
    static isIntermediateThrowEvent(kind) {
        return ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW === kind;
    }
    static isCallActivity(kind) {
        return ShapeBpmnElementKind.CALL_ACTIVITY === kind;
    }
    static isSubProcess(kind) {
        return ShapeBpmnElementKind.SUB_PROCESS === kind;
    }
    static canHaveNoneEvent(kind) {
        return ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW === kind || ShapeBpmnElementKind.EVENT_END === kind || ShapeBpmnElementKind.EVENT_START === kind;
    }
    static isActivity(kind) {
        return isKindOf(ACTIVITY_KINDS, kind);
    }
    static activityKinds() {
        return [...ACTIVITY_KINDS];
    }
    static isWithDefaultSequenceFlow(kind) {
        return FLOW_NODE_WITH_DEFAULT_SEQUENCE_FLOW_KINDS.has(kind);
    }
    static isTask(kind) {
        return isKindOf(TASK_KINDS, kind);
    }
    static taskKinds() {
        return [...TASK_KINDS];
    }
    static gatewayKinds() {
        return [...GATEWAY_KINDS];
    }
    static isGateway(kind) {
        return isKindOf(GATEWAY_KINDS, kind);
    }
    static flowNodeKinds() {
        return Object.values(ShapeBpmnElementKind).filter(kind => !ShapeUtil.isPoolOrLane(kind));
    }
    static isPoolOrLane(kind) {
        return kind == ShapeBpmnElementKind.POOL || kind == ShapeBpmnElementKind.LANE;
    }
}
function filterKind(suffix, options) {
    return filter(Object.values(ShapeBpmnElementKind), suffix, options);
}
function isKindOf(referenceKinds, kind) {
    return Object.values(referenceKinds)
        .map(value => value)
        .includes(kind);
}
const EVENT_KINDS = filterKind('Event');
const GATEWAY_KINDS = filterKind('Gateway');
const TASK_KINDS = filterKind('Task', { ignoreCase: true, notStartingWith: 'global' });
const ACTIVITY_KINDS = [...TASK_KINDS, ShapeBpmnElementKind.CALL_ACTIVITY, ShapeBpmnElementKind.SUB_PROCESS];
const FLOW_NODE_WITH_DEFAULT_SEQUENCE_FLOW_KINDS = new Set([
    ...ACTIVITY_KINDS,
    ShapeBpmnElementKind.GATEWAY_EXCLUSIVE,
    ShapeBpmnElementKind.GATEWAY_INCLUSIVE,
    ShapeBpmnElementKind.GATEWAY_COMPLEX,
]);
const eventDefinitionKinds = Object.values(ShapeBpmnEventDefinitionKind).filter(kind => kind != ShapeBpmnEventDefinitionKind.NONE);

var AssociationDirectionKind;
(function (AssociationDirectionKind) {
    AssociationDirectionKind["NONE"] = "None";
    AssociationDirectionKind["ONE"] = "One";
    AssociationDirectionKind["BOTH"] = "Both";
})(AssociationDirectionKind || (AssociationDirectionKind = {}));
var FlowKind;
(function (FlowKind) {
    FlowKind["SEQUENCE_FLOW"] = "sequenceFlow";
    FlowKind["MESSAGE_FLOW"] = "messageFlow";
    FlowKind["ASSOCIATION_FLOW"] = "association";
})(FlowKind || (FlowKind = {}));
var MessageVisibleKind;
(function (MessageVisibleKind) {
    MessageVisibleKind["NONE"] = "none";
    MessageVisibleKind["INITIATING"] = "initiating";
    MessageVisibleKind["NON_INITIATING"] = "non_initiating";
})(MessageVisibleKind || (MessageVisibleKind = {}));
var SequenceFlowKind;
(function (SequenceFlowKind) {
    SequenceFlowKind["NORMAL"] = "normal";
    SequenceFlowKind["DEFAULT"] = "default";
    SequenceFlowKind["CONDITIONAL_FROM_ACTIVITY"] = "conditional_from_activity";
    SequenceFlowKind["CONDITIONAL_FROM_GATEWAY"] = "conditional_from_gateway";
})(SequenceFlowKind || (SequenceFlowKind = {}));

class Flow {
    constructor(id, name, kind, sourceReferenceId, targetReferenceId) {
        Object.defineProperty(this, "id", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: id
        });
        Object.defineProperty(this, "name", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: name
        });
        Object.defineProperty(this, "kind", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: kind
        });
        Object.defineProperty(this, "sourceReferenceId", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: sourceReferenceId
        });
        Object.defineProperty(this, "targetReferenceId", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: targetReferenceId
        });
    }
}
class SequenceFlow extends Flow {
    constructor(id, name, sourceReferenceId, targetReferenceId, sequenceFlowKind = SequenceFlowKind.NORMAL) {
        super(id, name, FlowKind.SEQUENCE_FLOW, sourceReferenceId, targetReferenceId);
        Object.defineProperty(this, "sequenceFlowKind", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: sequenceFlowKind
        });
    }
}
class MessageFlow extends Flow {
    constructor(id, name, sourceReferenceId, targetReferenceId) {
        super(id, name, FlowKind.MESSAGE_FLOW, sourceReferenceId, targetReferenceId);
    }
}
class AssociationFlow extends Flow {
    constructor(id, name, sourceReferenceId, targetReferenceId, associationDirectionKind = AssociationDirectionKind.NONE) {
        super(id, name, FlowKind.ASSOCIATION_FLOW, sourceReferenceId, targetReferenceId);
        Object.defineProperty(this, "associationDirectionKind", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: associationDirectionKind
        });
    }
}

const mxgraph = initialize();
const mxCellRenderer = mxgraph.mxCellRenderer;
const mxClient = mxgraph.mxClient;
const mxConstants = mxgraph.mxConstants;
const mxEvent = mxgraph.mxEvent;
const mxPerimeter = mxgraph.mxPerimeter;
const mxPoint = mxgraph.mxPoint;
const mxRectangle = mxgraph.mxRectangle;
const mxRectangleShape = mxgraph.mxRectangleShape;
const mxSvgCanvas2D = mxgraph.mxSvgCanvas2D;
const mxUtils = mxgraph.mxUtils;
function initialize() {
    window.mxForceIncludes = false;
    window.mxLoadResources = false;
    window.mxLoadStylesheets = false;
    window.mxResourceExtension = '.txt';
    return factory({});
}

class CoordinatesTranslator {
    constructor(graph) {
        Object.defineProperty(this, "graph", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: graph
        });
    }
    computeRelativeCoordinates(parent, absoluteCoordinate) {
        const translateForRoot = this.getTranslateForRoot(parent);
        const relativeX = absoluteCoordinate.x + translateForRoot.x;
        const relativeY = absoluteCoordinate.y + translateForRoot.y;
        return new mxPoint(relativeX, relativeY);
    }
    getTranslateForRoot(cell) {
        const model = this.graph.getModel();
        const offset = new mxPoint(0, 0);
        while (cell != null) {
            const geo = model.getGeometry(cell);
            if (geo != null) {
                offset.x -= geo.x;
                offset.y -= geo.y;
            }
            cell = model.getParent(cell);
        }
        return offset;
    }
    computeEdgeCenter(edge) {
        const points = edge.geometry.points;
        const p0 = points[0];
        const pe = points.at(-1);
        const dx = pe.x - p0.x;
        const dy = pe.y - p0.y;
        return new mxPoint(p0.x + dx / 2, p0.y + dy / 2);
    }
}

class Shape {
    constructor(id, bpmnElement, bounds, label, isHorizontal) {
        Object.defineProperty(this, "id", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: id
        });
        Object.defineProperty(this, "bpmnElement", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: bpmnElement
        });
        Object.defineProperty(this, "bounds", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: bounds
        });
        Object.defineProperty(this, "label", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: label
        });
        Object.defineProperty(this, "isHorizontal", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: isHorizontal
        });
        Object.defineProperty(this, "extensions", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: {}
        });
    }
}

class ShapeBpmnElement {
    constructor(id, name, kind, parentId, instantiate = false) {
        Object.defineProperty(this, "id", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: id
        });
        Object.defineProperty(this, "name", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: name
        });
        Object.defineProperty(this, "kind", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: kind
        });
        Object.defineProperty(this, "parentId", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: parentId
        });
        Object.defineProperty(this, "instantiate", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: instantiate
        });
        Object.defineProperty(this, "incomingIds", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: []
        });
        Object.defineProperty(this, "outgoingIds", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: []
        });
    }
}
class ShapeBpmnActivity extends ShapeBpmnElement {
    constructor(id, name, kind, parentId, instantiate, markers = []) {
        super(id, name, kind, parentId, instantiate);
        Object.defineProperty(this, "markers", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: markers
        });
    }
}
class ShapeBpmnCallActivity extends ShapeBpmnActivity {
    constructor(id, name, callActivityKind, parentId, markers, globalTaskKind) {
        super(id, name, ShapeBpmnElementKind.CALL_ACTIVITY, parentId, undefined, markers);
        Object.defineProperty(this, "callActivityKind", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: callActivityKind
        });
        Object.defineProperty(this, "globalTaskKind", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: globalTaskKind
        });
    }
}
class ShapeBpmnSubProcess extends ShapeBpmnActivity {
    constructor(id, name, subProcessKind, parentId, markers) {
        subProcessKind == ShapeBpmnSubProcessKind.AD_HOC && !markers.includes(ShapeBpmnMarkerKind.ADHOC) && markers.push(ShapeBpmnMarkerKind.ADHOC);
        super(id, name, ShapeBpmnElementKind.SUB_PROCESS, parentId, undefined, markers);
        Object.defineProperty(this, "subProcessKind", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: subProcessKind
        });
    }
}
class ShapeBpmnEvent extends ShapeBpmnElement {
    constructor(id, name, elementKind, eventDefinitionKind, parentId) {
        super(id, name, elementKind, parentId);
        Object.defineProperty(this, "eventDefinitionKind", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: eventDefinitionKind
        });
    }
}
class ShapeBpmnIntermediateCatchEvent extends ShapeBpmnEvent {
    constructor(id, name, eventDefinitionKind, parentId) {
        super(id, name, ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, eventDefinitionKind, parentId);
        Object.defineProperty(this, "sourceIds", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: []
        });
    }
}
class ShapeBpmnIntermediateThrowEvent extends ShapeBpmnEvent {
    constructor(id, name, eventDefinitionKind, parentId) {
        super(id, name, ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW, eventDefinitionKind, parentId);
        Object.defineProperty(this, "targetId", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
    }
}
class ShapeBpmnStartEvent extends ShapeBpmnEvent {
    constructor(id, name, eventDefinitionKind, parentId, isInterrupting) {
        super(id, name, ShapeBpmnElementKind.EVENT_START, eventDefinitionKind, parentId);
        Object.defineProperty(this, "isInterrupting", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: isInterrupting
        });
    }
}
class ShapeBpmnBoundaryEvent extends ShapeBpmnEvent {
    constructor(id, name, eventDefinitionKind, parentId, isInterrupting = true) {
        super(id, name, ShapeBpmnElementKind.EVENT_BOUNDARY, eventDefinitionKind, parentId);
        Object.defineProperty(this, "isInterrupting", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: isInterrupting
        });
    }
}
class ShapeBpmnEventBasedGateway extends ShapeBpmnElement {
    constructor(id, name, parentId, instantiate, gatewayKind = ShapeBpmnEventBasedGatewayKind.None) {
        super(id, name, ShapeBpmnElementKind.GATEWAY_EVENT_BASED, parentId, instantiate);
        Object.defineProperty(this, "gatewayKind", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: gatewayKind
        });
    }
}

function ensureInRange(value, min, max, defaultValue) {
    const inRangeValue = value !== null && value !== void 0 ? value : defaultValue;
    return Math.min(Math.max(inRangeValue, min), max);
}
function ensurePositiveValue(input) {
    return Math.max(input !== null && input !== void 0 ? input : 0, 0);
}
function ensureValidZoomConfiguration(config) {
    const validatedConfig = config !== null && config !== void 0 ? config : {};
    validatedConfig.debounceDelay = ensureInRange(validatedConfig.debounceDelay, 0, 100, 50);
    validatedConfig.throttleDelay = ensureInRange(validatedConfig.throttleDelay, 0, 100, 50);
    return validatedConfig;
}
function ensureOpacityValue(opacity) {
    return opacity == 'default' ? undefined : ensureInRange(opacity, 0, 100, 100);
}
function ensureStrokeWidthValue(strokeWidth) {
    return strokeWidth == 'default' ? undefined : ensureInRange(strokeWidth, 1, 50, 1);
}

const BpmnStyleIdentifier = {
    EDGE: 'bpmn.edge',
    EDGE_START_FILL_COLOR: 'bpmn.edge.startFillColor',
    EDGE_END_FILL_COLOR: 'bpmn.edge.endFillColor',
    EVENT_BASED_GATEWAY_KIND: 'bpmn.gatewayKind',
    EVENT_DEFINITION_KIND: 'bpmn.eventDefinitionKind',
    GLOBAL_TASK_KIND: 'bpmn.globalTaskKind',
    SUB_PROCESS_KIND: 'bpmn.subProcessKind',
    IS_INITIATING: 'bpmn.isInitiating',
    IS_INSTANTIATING: 'bpmn.isInstantiating',
    IS_INTERRUPTING: 'bpmn.isInterrupting',
    EXTRA_CSS_CLASSES: 'bpmn.extra.css.classes',
    MARKERS: 'bpmn.markers',
    MESSAGE_FLOW_ICON: 'bpmn.messageFlowIcon',
};
const MarkerIdentifier = {
    ARROW_DASH: 'bpmn.dash',
};

const StyleDefault = {
    STROKE_WIDTH_THIN: 2,
    STROKE_WIDTH_THICK: 5,
    SHAPE_ACTIVITY_BOTTOM_MARGIN: 7,
    SHAPE_ACTIVITY_TOP_MARGIN: 7,
    SHAPE_ACTIVITY_LEFT_MARGIN: 7,
    SHAPE_ACTIVITY_MARKER_ICON_MARGIN: 5,
    SHAPE_ACTIVITY_MARKER_ICON_SIZE: 20,
    POOL_LABEL_SIZE: 30,
    POOL_LABEL_FILL_COLOR: 'none',
    LANE_LABEL_SIZE: 30,
    LANE_LABEL_FILL_COLOR: 'none',
    SUB_PROCESS_TRANSACTION_INNER_RECT_OFFSET: 4,
    SUB_PROCESS_TRANSACTION_INNER_RECT_ARC_SIZE: 6,
    TEXT_ANNOTATION_BORDER_LENGTH: 10,
    TEXT_ANNOTATION_FILL_COLOR: 'none',
    GROUP_FILL_COLOR: 'none',
    DEFAULT_FILL_COLOR: 'White',
    DEFAULT_STROKE_COLOR: 'Black',
    DEFAULT_FONT_FAMILY: 'Arial, Helvetica, sans-serif',
    DEFAULT_FONT_SIZE: 11,
    DEFAULT_FONT_COLOR: 'Black',
    DEFAULT_MARGIN: 0,
    SHAPE_ARC_SIZE: 20,
    DEFAULT_OVERLAY_FILL_COLOR: 'White',
    DEFAULT_OVERLAY_FILL_OPACITY: 100,
    DEFAULT_OVERLAY_STROKE_COLOR: 'Black',
    DEFAULT_OVERLAY_STROKE_WIDTH: 1,
    DEFAULT_OVERLAY_FONT_SIZE: 11,
    DEFAULT_OVERLAY_FONT_COLOR: 'Black',
    SEQUENCE_FLOW_CONDITIONAL_FROM_ACTIVITY_MARKER_FILL_COLOR: 'White',
    MESSAGE_FLOW_MARKER_START_FILL_COLOR: 'White',
    MESSAGE_FLOW_MARKER_END_FILL_COLOR: 'White',
};
const getBpmnIsInstantiating = (style) => mxUtils.getValue(style, BpmnStyleIdentifier.IS_INSTANTIATING, 'false') == 'true';
const convertDefaultValue = (value) => (value == 'default' ? undefined : value);
const updateStroke = (cellStyle, stroke) => {
    if (stroke) {
        cellStyle = setStyle(cellStyle, mxConstants.STYLE_STROKECOLOR, stroke.color, convertDefaultValue);
        cellStyle = setStyle(cellStyle, mxConstants.STYLE_STROKE_OPACITY, stroke.opacity, ensureOpacityValue);
        cellStyle = setStyle(cellStyle, mxConstants.STYLE_STROKEWIDTH, stroke.width, ensureStrokeWidthValue);
    }
    return cellStyle;
};
const setStyle = (cellStyle, key, value, converter = (value) => value) => {
    return value == undefined ? cellStyle : mxUtils.setStyle(cellStyle, key, converter(value));
};
const setStyleFlag = (cellStyle, key, flag, value) => value == undefined ? cellStyle : mxUtils.setStyleFlag(cellStyle, key, flag, value);
const updateFont = (cellStyle, font) => {
    if (font) {
        cellStyle = setStyle(cellStyle, mxConstants.STYLE_FONTCOLOR, font.color, convertDefaultValue);
        cellStyle = setStyle(cellStyle, mxConstants.STYLE_FONTSIZE, font.size);
        cellStyle = setStyle(cellStyle, mxConstants.STYLE_FONTFAMILY, font.family);
        cellStyle = setStyleFlag(cellStyle, mxConstants.STYLE_FONTSTYLE, mxConstants.FONT_BOLD, font.isBold);
        cellStyle = setStyleFlag(cellStyle, mxConstants.STYLE_FONTSTYLE, mxConstants.FONT_ITALIC, font.isItalic);
        cellStyle = setStyleFlag(cellStyle, mxConstants.STYLE_FONTSTYLE, mxConstants.FONT_UNDERLINE, font.isUnderline);
        cellStyle = setStyleFlag(cellStyle, mxConstants.STYLE_FONTSTYLE, mxConstants.FONT_STRIKETHROUGH, font.isStrikeThrough);
        cellStyle = setStyle(cellStyle, mxConstants.STYLE_TEXT_OPACITY, font.opacity, ensureOpacityValue);
    }
    return cellStyle;
};
const getStyleValue = (cellStyle, key, defaultValue) => {
    var _a;
    return (_a = cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle.split(';').map(entry => entry.split('=')).filter(([k]) => k === key).map(([, v]) => v)[0]) !== null && _a !== void 0 ? _a : defaultValue;
};
const convertDirection = (direction) => {
    switch (direction) {
        case 'right-to-left': {
            return mxConstants.DIRECTION_WEST;
        }
        case 'bottom-to-top': {
            return mxConstants.DIRECTION_NORTH;
        }
        case 'top-to-bottom': {
            return mxConstants.DIRECTION_SOUTH;
        }
        default: {
            return mxConstants.DIRECTION_EAST;
        }
    }
};
const updateFill = (cellStyle, fill) => {
    const color = fill.color;
    if (color) {
        const isGradient = isFillColorGradient(color);
        const fillColor = isGradient ? color.startColor : color;
        cellStyle = setStyle(cellStyle, mxConstants.STYLE_FILLCOLOR, fillColor, convertDefaultValue);
        if (isGradient) {
            cellStyle = mxUtils.setStyle(cellStyle, mxConstants.STYLE_GRADIENTCOLOR, color.endColor);
            cellStyle = mxUtils.setStyle(cellStyle, mxConstants.STYLE_GRADIENT_DIRECTION, convertDirection(color.direction));
        }
        else if (color === 'default') {
            cellStyle = mxUtils.setStyle(cellStyle, mxConstants.STYLE_GRADIENTCOLOR, undefined);
            cellStyle = mxUtils.setStyle(cellStyle, mxConstants.STYLE_GRADIENT_DIRECTION, undefined);
        }
        if (cellStyle.includes(ShapeBpmnElementKind.POOL) || cellStyle.includes(ShapeBpmnElementKind.LANE)) {
            cellStyle = setStyle(cellStyle, mxConstants.STYLE_SWIMLANE_FILLCOLOR, fillColor, convertDefaultValue);
        }
    }
    cellStyle = setStyle(cellStyle, mxConstants.STYLE_FILL_OPACITY, fill.opacity, ensureOpacityValue);
    return cellStyle;
};
const isShapeStyleUpdate = (style) => {
    return style && typeof style === 'object' && 'fill' in style;
};
const isFillColorGradient = (color) => {
    return color && typeof color === 'object';
};

class StyleComputer {
    constructor(options) {
        var _a;
        Object.defineProperty(this, "ignoreBpmnColors", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        this.ignoreBpmnColors = (_a = options === null || options === void 0 ? void 0 : options.ignoreBpmnColors) !== null && _a !== void 0 ? _a : true;
    }
    computeStyle(bpmnCell, labelBounds) {
        const styles = [bpmnCell.bpmnElement.kind];
        let mainStyleValues;
        if (bpmnCell instanceof Shape) {
            mainStyleValues = this.computeShapeStyleValues(bpmnCell);
        }
        else {
            styles.push(...computeEdgeBaseStyles(bpmnCell));
            mainStyleValues = this.computeEdgeStyleValues(bpmnCell);
        }
        const fontStyleValues = this.computeFontStyleValues(bpmnCell);
        const labelStyleValues = computeLabelStyleValues(bpmnCell, labelBounds);
        styles.push(...toArrayOfMxGraphStyleEntries([...mainStyleValues, ...fontStyleValues, ...labelStyleValues]));
        return styles.join(';');
    }
    computeShapeStyleValues(shape) {
        const styleValues = new Map();
        const bpmnElement = shape.bpmnElement;
        if (bpmnElement instanceof ShapeBpmnEvent) {
            computeEventShapeStyle(bpmnElement, styleValues);
        }
        else if (bpmnElement instanceof ShapeBpmnActivity) {
            computeActivityShapeStyle(bpmnElement, styleValues);
        }
        else if (ShapeUtil.isPoolOrLane(bpmnElement.kind)) {
            styleValues.set(mxConstants.STYLE_HORIZONTAL, shape.isHorizontal ? '0' : '1');
        }
        else if (bpmnElement instanceof ShapeBpmnEventBasedGateway) {
            styleValues.set(BpmnStyleIdentifier.IS_INSTANTIATING, String(bpmnElement.instantiate));
            styleValues.set(BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND, String(bpmnElement.gatewayKind));
        }
        if (!this.ignoreBpmnColors) {
            const extensions = shape.extensions;
            const fillColor = extensions.fillColor;
            if (fillColor) {
                styleValues.set(mxConstants.STYLE_FILLCOLOR, fillColor);
                if (ShapeUtil.isPoolOrLane(bpmnElement.kind)) {
                    styleValues.set(mxConstants.STYLE_SWIMLANE_FILLCOLOR, fillColor);
                }
            }
            extensions.strokeColor && styleValues.set(mxConstants.STYLE_STROKECOLOR, extensions.strokeColor);
        }
        return styleValues;
    }
    computeEdgeStyleValues(edge) {
        const styleValues = new Map();
        if (!this.ignoreBpmnColors) {
            const extensions = edge.extensions;
            extensions.strokeColor && styleValues.set(mxConstants.STYLE_STROKECOLOR, extensions.strokeColor);
        }
        return styleValues;
    }
    computeFontStyleValues(bpmnCell) {
        var _a, _b;
        const styleValues = new Map();
        const font = (_a = bpmnCell.label) === null || _a === void 0 ? void 0 : _a.font;
        if (font) {
            styleValues.set(mxConstants.STYLE_FONTFAMILY, font.name);
            styleValues.set(mxConstants.STYLE_FONTSIZE, font.size);
            styleValues.set(mxConstants.STYLE_FONTSTYLE, getFontStyleValue(font));
        }
        if (!this.ignoreBpmnColors) {
            const extensions = (_b = bpmnCell.label) === null || _b === void 0 ? void 0 : _b.extensions;
            (extensions === null || extensions === void 0 ? void 0 : extensions.color) && styleValues.set(mxConstants.STYLE_FONTCOLOR, extensions.color);
        }
        return styleValues;
    }
    computeMessageFlowIconStyle(edge) {
        const styleValues = [];
        styleValues.push(['shape', BpmnStyleIdentifier.MESSAGE_FLOW_ICON], [BpmnStyleIdentifier.IS_INITIATING, String(edge.messageVisibleKind === MessageVisibleKind.INITIATING)]);
        if (!this.ignoreBpmnColors) {
            edge.extensions.strokeColor && styleValues.push([mxConstants.STYLE_STROKECOLOR, edge.extensions.strokeColor]);
        }
        return toArrayOfMxGraphStyleEntries(styleValues).join(';');
    }
}
function computeEventShapeStyle(bpmnElement, styleValues) {
    styleValues.set(BpmnStyleIdentifier.EVENT_DEFINITION_KIND, bpmnElement.eventDefinitionKind);
    if (bpmnElement instanceof ShapeBpmnBoundaryEvent || (bpmnElement instanceof ShapeBpmnStartEvent && bpmnElement.isInterrupting !== undefined)) {
        styleValues.set(BpmnStyleIdentifier.IS_INTERRUPTING, String(bpmnElement.isInterrupting));
    }
}
function computeActivityShapeStyle(bpmnElement, styleValues) {
    if (bpmnElement instanceof ShapeBpmnSubProcess) {
        styleValues.set(BpmnStyleIdentifier.SUB_PROCESS_KIND, bpmnElement.subProcessKind);
    }
    else if (bpmnElement.kind === ShapeBpmnElementKind.TASK_RECEIVE) {
        styleValues.set(BpmnStyleIdentifier.IS_INSTANTIATING, String(bpmnElement.instantiate));
    }
    else if (bpmnElement instanceof ShapeBpmnCallActivity) {
        styleValues.set(BpmnStyleIdentifier.GLOBAL_TASK_KIND, bpmnElement.globalTaskKind);
    }
    const markers = bpmnElement.markers;
    if (markers.length > 0) {
        styleValues.set(BpmnStyleIdentifier.MARKERS, markers.join(','));
    }
}
function computeEdgeBaseStyles(edge) {
    const styles = [];
    const bpmnElement = edge.bpmnElement;
    if (bpmnElement instanceof SequenceFlow) {
        styles.push(bpmnElement.sequenceFlowKind);
    }
    if (bpmnElement instanceof AssociationFlow) {
        styles.push(bpmnElement.associationDirectionKind);
    }
    return styles;
}
function computeLabelStyleValues(bpmnCell, labelBounds) {
    const styleValues = new Map();
    const bpmnElement = bpmnCell.bpmnElement;
    if (labelBounds) {
        styleValues.set(mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_TOP);
        if (bpmnCell.bpmnElement.kind != ShapeBpmnElementKind.TEXT_ANNOTATION) {
            styleValues.set(mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER);
        }
        if (bpmnCell instanceof Shape) {
            styleValues.set(mxConstants.STYLE_LABEL_WIDTH, labelBounds.width + 1);
            styleValues.set(mxConstants.STYLE_LABEL_POSITION, 'ignore');
            styleValues.set(mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE);
        }
    }
    else if (bpmnCell instanceof Shape &&
        (bpmnElement instanceof ShapeBpmnSubProcess || (bpmnElement instanceof ShapeBpmnCallActivity && bpmnElement.callActivityKind === ShapeBpmnCallActivityKind.CALLING_PROCESS)) &&
        !bpmnElement.markers.includes(ShapeBpmnMarkerKind.EXPAND)) {
        styleValues.set(mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_TOP);
    }
    return styleValues;
}
function getFontStyleValue(font) {
    let value = 0;
    if (font.isBold) {
        value += mxConstants.FONT_BOLD;
    }
    if (font.isItalic) {
        value += mxConstants.FONT_ITALIC;
    }
    if (font.isStrikeThrough) {
        value += mxConstants.FONT_STRIKETHROUGH;
    }
    if (font.isUnderline) {
        value += mxConstants.FONT_UNDERLINE;
    }
    return value;
}
function toArrayOfMxGraphStyleEntries(styleValues) {
    return styleValues.filter(([, v]) => v && v != 'undefined').map(([key, value]) => `${key}=${value}`);
}

class BpmnRenderer {
    constructor(graph, coordinatesTranslator, styleComputer) {
        Object.defineProperty(this, "graph", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: graph
        });
        Object.defineProperty(this, "coordinatesTranslator", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: coordinatesTranslator
        });
        Object.defineProperty(this, "styleComputer", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: styleComputer
        });
    }
    render(renderedModel, fitOptions) {
        this.insertShapesAndEdges(renderedModel);
        this.graph.customFit(fitOptions);
    }
    insertShapesAndEdges({ pools, lanes, subprocesses, otherFlowNodes, boundaryEvents, edges }) {
        this.graph.batchUpdate(() => {
            this.graph.getModel().clear();
            this.insertShapes(pools);
            this.insertShapes(lanes);
            this.insertShapes(subprocesses);
            this.insertShapes(otherFlowNodes);
            this.insertShapes(boundaryEvents);
            this.insertEdges(edges);
        });
    }
    insertShapes(shapes) {
        for (const shape of shapes)
            this.insertShape(shape);
    }
    getParent(bpmnElement) {
        const bpmnElementParent = this.getCell(bpmnElement.parentId);
        return bpmnElementParent !== null && bpmnElementParent !== void 0 ? bpmnElementParent : this.graph.getDefaultParent();
    }
    insertShape(shape) {
        var _a;
        const bpmnElement = shape.bpmnElement;
        const parent = this.getParent(bpmnElement);
        const bounds = shape.bounds;
        let labelBounds = (_a = shape.label) === null || _a === void 0 ? void 0 : _a.bounds;
        labelBounds = ShapeUtil.isPoolOrLane(bpmnElement.kind) ? undefined : labelBounds;
        const style = this.styleComputer.computeStyle(shape, labelBounds);
        this.insertVertex(parent, bpmnElement.id, bpmnElement.name, bounds, labelBounds, style);
    }
    insertEdges(edges) {
        var _a;
        for (const internalEdge of edges) {
            const bpmnElement = internalEdge.bpmnElement;
            const parent = this.graph.getDefaultParent();
            const source = this.getCell(bpmnElement.sourceReferenceId);
            const target = this.getCell(bpmnElement.targetReferenceId);
            const labelBounds = (_a = internalEdge.label) === null || _a === void 0 ? void 0 : _a.bounds;
            const style = this.styleComputer.computeStyle(internalEdge, labelBounds);
            const edge = this.graph.insertEdge(parent, bpmnElement.id, bpmnElement.name, source, target, style);
            this.insertWaypoints(internalEdge.waypoints, edge);
            if (labelBounds) {
                edge.geometry.width = labelBounds.width;
                edge.geometry.height = labelBounds.height;
                const edgeCenterCoordinate = this.coordinatesTranslator.computeEdgeCenter(edge);
                edge.geometry.relative = false;
                const labelBoundsRelativeCoordinateFromParent = this.coordinatesTranslator.computeRelativeCoordinates(edge.parent, new mxPoint(labelBounds.x, labelBounds.y));
                const relativeLabelX = labelBoundsRelativeCoordinateFromParent.x + labelBounds.width / 2 - edgeCenterCoordinate.x;
                const relativeLabelY = labelBoundsRelativeCoordinateFromParent.y - edgeCenterCoordinate.y;
                edge.geometry.offset = new mxPoint(relativeLabelX, relativeLabelY);
            }
            this.insertMessageFlowIconIfNeeded(internalEdge, edge);
        }
    }
    insertMessageFlowIconIfNeeded(internalEdge, edge) {
        if (internalEdge.bpmnElement instanceof MessageFlow && internalEdge.messageVisibleKind !== MessageVisibleKind.NONE) {
            const cell = this.graph.insertVertex(edge, messageFlowIconId(edge.id), undefined, 0, 0, 20, 14, this.styleComputer.computeMessageFlowIconStyle(internalEdge));
            cell.geometry.relative = true;
            cell.geometry.offset = new mxPoint(-10, -7);
        }
    }
    insertWaypoints(waypoints, edge) {
        if (waypoints) {
            edge.geometry.points = waypoints.map(waypoint => this.coordinatesTranslator.computeRelativeCoordinates(edge.parent, new mxPoint(waypoint.x, waypoint.y)));
        }
    }
    getCell(id) {
        return this.graph.getModel().getCell(id);
    }
    insertVertex(parent, id, value, bounds, labelBounds, style) {
        const vertexCoordinates = this.coordinatesTranslator.computeRelativeCoordinates(parent, new mxPoint(bounds.x, bounds.y));
        const cell = this.graph.insertVertex(parent, id, value, vertexCoordinates.x, vertexCoordinates.y, bounds.width, bounds.height, style);
        if (labelBounds) {
            const relativeLabelX = labelBounds.x - bounds.x;
            const relativeLabelY = labelBounds.y - bounds.y;
            cell.geometry.offset = new mxPoint(relativeLabelX, relativeLabelY);
        }
        return cell;
    }
}
function newBpmnRenderer(graph, options) {
    return new BpmnRenderer(graph, new CoordinatesTranslator(graph), new StyleComputer(options));
}
function messageFlowIconId(messageFlowId) {
    return `messageFlowIcon_of_${messageFlowId}`;
}

class MxGraphCustomOverlay extends mxgraph.mxCellOverlay {
    constructor(label, options) {
        super(null, '', options.position.horizontalAlign, options.position.verticalAlign, null, 'default');
        Object.defineProperty(this, "label", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: label
        });
        Object.defineProperty(this, "style", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: void 0
        });
        this.style = options.style;
    }
    getBounds(state) {
        const isEdge = state.view.graph.getModel().isEdge(state.cell);
        const s = state.view.scale;
        let pt;
        const w = 0;
        const h = 0;
        if (isEdge) {
            pt = this.computeEdgeBounds(state);
        }
        else {
            pt = new mxPoint();
            if (this.align == mxConstants.ALIGN_LEFT) {
                pt.x = state.x;
            }
            else if (this.align == mxConstants.ALIGN_CENTER) {
                pt.x = state.x + state.width / 2;
            }
            else {
                pt.x = state.x + state.width;
            }
            if (this.verticalAlign == mxConstants.ALIGN_TOP) {
                pt.y = state.y;
            }
            else if (this.verticalAlign == mxConstants.ALIGN_MIDDLE) {
                pt.y = state.y + state.height / 2;
            }
            else {
                pt.y = state.y + state.height;
            }
        }
        return new mxRectangle(Math.round(pt.x - (w * this.defaultOverlap - this.offset.x) * s), Math.round(pt.y - (h * this.defaultOverlap - this.offset.y) * s), w * s, h * s);
    }
    computeEdgeBounds(state) {
        const pts = state.absolutePoints;
        if (this.align == mxConstants.ALIGN_LEFT) {
            return pts[0];
        }
        else if (this.align == mxConstants.ALIGN_CENTER) {
            if (pts.length % 2 == 1) {
                return pts[Math.floor(pts.length / 2)];
            }
            else {
                const index = pts.length / 2;
                const p0 = pts[index - 1];
                const p1 = pts[index];
                return new mxPoint(p0.x + (p1.x - p0.x) / 2, p0.y + (p1.y - p0.y) / 2);
            }
        }
        else {
            return pts.at(-1);
        }
    }
}

class OverlayBadgeShape extends mxgraph.mxText {
    constructor(value, bounds, style) {
        super(value, bounds, undefined, undefined, style.font.color, undefined, style.font.size, undefined, undefined, undefined, undefined, undefined, undefined, undefined, style.fill.color, style.stroke.color);
        this.fillOpacity = style.fill.opacity;
        this.strokewidth = style.stroke.width;
    }
}

function isFlowKind(kind) {
    return Object.values(FlowKind)
        .map(value => value)
        .includes(kind);
}

function computeAllBpmnClassNamesOfCell(cell, isLabel) {
    return computeAllBpmnClassNames(cell.style, isLabel);
}
function computeAllBpmnClassNames(style, isLabel) {
    const classes = [];
    const styleElements = style.split(';');
    const pseudoBpmnElementKind = styleElements[0];
    const bpmnElementKind = pseudoBpmnElementKind.replace(/shape=bpmn./g, '');
    const typeClasses = new Map();
    typeClasses.set('bpmn-type-activity', ShapeUtil.isActivity(bpmnElementKind));
    typeClasses.set('bpmn-type-container', ShapeUtil.isPoolOrLane(bpmnElementKind));
    typeClasses.set('bpmn-type-event', ShapeUtil.isEvent(bpmnElementKind));
    typeClasses.set('bpmn-type-flow', isFlowKind(bpmnElementKind));
    typeClasses.set('bpmn-type-gateway', ShapeUtil.isGateway(bpmnElementKind));
    typeClasses.set('bpmn-type-task', ShapeUtil.isTask(bpmnElementKind));
    for (const [className] of [...typeClasses].filter(([, isType]) => isType))
        classes.push(className);
    classes.push(computeBpmnBaseClassName(bpmnElementKind));
    for (const [key, value] of styleElements.map(entry => {
        const elements = entry.split('=');
        return [elements[0], elements[1]];
    })) {
        switch (key) {
            case BpmnStyleIdentifier.EVENT_DEFINITION_KIND: {
                classes.push(`bpmn-event-def-${value}`);
                break;
            }
            case BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND: {
                classes.push(`bpmn-gateway-kind-${value.toLowerCase()}`);
                break;
            }
            case BpmnStyleIdentifier.IS_INITIATING: {
                classes.push(value == 'true' ? 'bpmn-icon-initiating' : 'bpmn-icon-non-initiating');
                break;
            }
            case BpmnStyleIdentifier.SUB_PROCESS_KIND: {
                classes.push(`bpmn-sub-process-${value.toLowerCase()}`);
                break;
            }
            case BpmnStyleIdentifier.GLOBAL_TASK_KIND: {
                classes.push(computeBpmnBaseClassName(value));
                break;
            }
        }
    }
    if (isLabel) {
        classes.push('bpmn-label');
    }
    return classes;
}
function computeBpmnBaseClassName(bpmnElementKind) {
    return bpmnElementKind ? 'bpmn-' + bpmnElementKind.replace(/([A-Z])/g, g => '-' + g[0].toLowerCase()) : '';
}

const overrideCreateSvgCanvas = function (shape) {
    const originalShapeCreateSvgCanvas = shape.createSvgCanvas;
    shape.createSvgCanvas = function () {
        var _a;
        const canvas = originalShapeCreateSvgCanvas.bind(this)();
        const originalCanvasGetTextCss = canvas.getTextCss;
        canvas.getTextCss = function () {
            const originalPointerEvents = this.pointerEvents;
            this.pointerEvents = false;
            const textCss = originalCanvasGetTextCss.bind(this)();
            this.pointerEvents = originalPointerEvents;
            return textCss;
        };
        if ((_a = this.state) === null || _a === void 0 ? void 0 : _a.cell) {
            const cell = this.state.cell;
            const allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === mxConstants.DIALECT_STRICTHTML);
            const extraCssClasses = this.state.style[BpmnStyleIdentifier.EXTRA_CSS_CLASSES];
            if (typeof extraCssClasses == 'string') {
                allBpmnClassNames.push(...extraCssClasses.split(','));
            }
            this.node.setAttribute('class', allBpmnClassNames.join(' '));
            this.node.dataset.bpmnId = this.state.cell.id;
        }
        return canvas;
    };
};

class BpmnCellRenderer extends mxgraph.mxCellRenderer {
    constructor(iconPainter) {
        super();
        Object.defineProperty(this, "iconPainter", {
            enumerable: true,
            configurable: true,
            writable: true,
            value: iconPainter
        });
    }
    createCellOverlays(state) {
        const graph = state.view.graph;
        const overlays = graph.getCellOverlays(state.cell);
        let dict = null;
        if (overlays != null) {
            dict = new mxgraph.mxDictionary();
            for (const currentOverlay of overlays) {
                const shape = state.overlays == null ? null : state.overlays.remove(currentOverlay);
                if (shape != null) {
                    dict.put(currentOverlay, shape);
                    continue;
                }
                let overlayShape;
                if (currentOverlay instanceof MxGraphCustomOverlay) {
                    overlayShape = new OverlayBadgeShape(currentOverlay.label, new mxRectangle(0, 0, 0, 0), currentOverlay.style);
                }
                else {
                    overlayShape = new mxgraph.mxImageShape(new mxRectangle(0, 0, 0, 0), currentOverlay.image.src);
                    overlayShape.preserveImageAspect = false;
                }
                overlayShape.dialect = state.view.graph.dialect;
                overlayShape.overlay = currentOverlay;
                this.initializeOverlay(state, overlayShape);
                this.installCellOverlayListeners(state, currentOverlay, overlayShape);
                if (currentOverlay.cursor != null) {
                    overlayShape.node.style.cursor = currentOverlay.cursor;
                }
                if (overlayShape instanceof OverlayBadgeShape) {
                    overlayShape.node.classList.add('overlay-badge');
                    overlayShape.node.dataset.bpmnId = state.cell.id;
                }
                dict.put(currentOverlay, overlayShape);
            }
        }
        if (state.overlays != null) {
            state.overlays.visit(function (_id, shape) {
                shape.destroy();
            });
        }
        state.overlays = dict;
    }
    createShape(state) {
        const shape = super.createShape(state);
        if ('iconPainter' in shape) {
            shape.iconPainter = this.iconPainter;
        }
        overrideCreateSvgCanvas(shape);
        return shape;
    }
    createLabel(state, value) {
        super.createLabel(state, value);
        overrideCreateSvgCanvas(state.text);
    }
}

function computeScaledIconSize(initialIconSize, iconStyleConfiguration, shapeConfiguration, ratioFromShape) {
    let iconWidthProportionalToShape;
    let iconHeightProportionalToShape;
    if (initialIconSize.height < initialIconSize.width || (initialIconSize.height == initialIconSize.width && shapeConfiguration.width <= shapeConfiguration.height)) {
        iconWidthProportionalToShape = shapeConfiguration.width;
        iconHeightProportionalToShape = (shapeConfiguration.width * initialIconSize.height) / initialIconSize.width;
    }
    else {
        iconWidthProportiona