(self["webpackChunkipypetrinet"] = self["webpackChunkipypetrinet"] || []).push([["lib_widget_js"],{

/***/ "./lib/customTrans.js":
/*!****************************!*\
  !*** ./lib/customTrans.js ***!
  \****************************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

// Copyright (c) Jakob Bucksch
// Distributed under the terms of the Modified BSD License.
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.customTransition = void 0;
const joint = __importStar(__webpack_require__(/*! ../node_modules/jointjs/dist/joint */ "./node_modules/jointjs/dist/joint.js"));
// Extending the joint.shapes.pn.Transition:
// Set some constants to structure it clearly
const PADDING_S = 4;
const PADDING_L = 4;
const FONT_FAMILY = 'sans-serif';
const LIGHT_COLOR = '#FFF';
const DARK_COLOR = '#333';
const ACTION_COLOR = '#7c68fc';
const LINE_WIDTH = 2;
const HEADER_HEIGHT = 15;
const LIST_MAX_PORT_COUNT = 5;
const LIST_GROUP_NAME = 'conditions';
const LIST_ITEM_HEIGHT = 23;
const LIST_ITEM_WIDTH = 120;
const LIST_ITEM_LABEL = 'Condition Item';
const LIST_ITEM_GAP = 1;
const LIST_BUTTON_RADIUS = 16;
const LIST_ADD_BUTTON_SIZE = 20;
const LIST_REMOVE_BUTTON_SIZE = 16;
const itemPosition = (portsArgs, elBBox) => {
    return portsArgs.map((_port, index, { length }) => {
        const bottom = elBBox.height - (LIST_ITEM_HEIGHT + LIST_ADD_BUTTON_SIZE) / 2 - PADDING_S;
        const y = (length - 1 - index) * (LIST_ITEM_HEIGHT + LIST_ITEM_GAP);
        return new joint.g.Point(0, bottom - y);
    });
};
const conditionAttributes = {
    attrs: {
        portBody: {
            width: 'calc(w)',
            height: 'calc(h)',
            x: '2',
            y: 'calc(-0.5*h)',
            fill: '#333',
            rx: 3,
            ry: 3
        },
        portRemoveButton: {
            cursor: 'pointer',
            event: 'element:port:remove',
            transform: `translate(${PADDING_L},0)`,
            title: 'Remove Condition'
        },
        portRemoveButtonBody: {
            width: LIST_REMOVE_BUTTON_SIZE,
            height: LIST_REMOVE_BUTTON_SIZE,
            x: 1,
            y: -LIST_REMOVE_BUTTON_SIZE / 2,
            fill: LIGHT_COLOR,
            rx: LIST_BUTTON_RADIUS,
            ry: LIST_BUTTON_RADIUS
        },
        portRemoveButtonIcon: {
            d: 'M 5 -4 13 4 M 5 4 13 -4',
            stroke: DARK_COLOR,
            strokeWidth: LINE_WIDTH
        },
        portLabel: {
            pointerEvents: 'none',
            fontFamily: FONT_FAMILY,
            fontWeight: 400,
            fontSize: 10,
            fill: LIGHT_COLOR,
            textAnchor: 'start',
            textVerticalAnchor: 'middle',
            textWrap: {
                width: -LIST_REMOVE_BUTTON_SIZE - PADDING_L - 2 * PADDING_S,
                maxLineCount: 1,
                ellipsis: true
            },
            x: PADDING_L + LIST_REMOVE_BUTTON_SIZE + PADDING_S
        },
    },
    size: {
        width: LIST_ITEM_WIDTH,
        height: LIST_ITEM_HEIGHT
    },
    markup: [{
            tagName: 'rect',
            selector: 'portBody'
        }, {
            tagName: 'text',
            selector: 'portLabel',
        }, {
            tagName: 'g',
            selector: 'portRemoveButton',
            children: [{
                    tagName: 'rect',
                    selector: 'portRemoveButtonBody'
                }, {
                    tagName: 'path',
                    selector: 'portRemoveButtonIcon'
                }]
        }]
};
const bodyAttributes = {
    attrs: {
        ".root": {
            magnet: true
        },
        body: {
            width: 'calc(w)',
            height: 'calc(h)',
            fill: "#9586fd",
            strokeWidth: LINE_WIDTH + 1,
            stroke: "#7c68fc",
            rx: 3,
            ry: 3,
        },
        label: {
            'text-anchor': 'middle',
            'ref-x': .5,
            'ref-y': -15,
            'ref': 'rect',
            'text': "",
            'fill': '#fe854f',
            'font-size': 12,
            'font-weight': 600,
        },
        portAddButton: {
            title: 'Add Condition',
            cursor: 'pointer',
            event: 'element:port:add',
            transform: `translate(calc(w-${3 * PADDING_S}),calc(h))`,
        },
        portAddButtonBody: {
            width: LIST_ADD_BUTTON_SIZE,
            height: LIST_ADD_BUTTON_SIZE,
            rx: LIST_BUTTON_RADIUS,
            ry: LIST_BUTTON_RADIUS,
            x: -LIST_ADD_BUTTON_SIZE / 2,
            y: -LIST_ADD_BUTTON_SIZE / 2,
        },
        portAddButtonIcon: {
            d: 'M -4 0 4 0 M 0 -4 0 4',
            stroke: LIGHT_COLOR,
            strokeWidth: LINE_WIDTH
        }
    },
    markup: [{
            tagName: 'rect',
            selector: 'body',
        }, {
            tagName: 'text',
            selector: 'label',
        }, {
            tagName: 'g',
            selector: 'portAddButton',
            children: [{
                    tagName: 'rect',
                    selector: 'portAddButtonBody'
                }, {
                    tagName: 'path',
                    selector: 'portAddButtonIcon'
                }]
        }]
};
// Actual Extension of the Transition:
class customTransition extends joint.shapes.pn.Transition {
    defaults() {
        return Object.assign(Object.assign(Object.assign({}, super.defaults), bodyAttributes), { type: "customTransition", size: { width: LIST_ITEM_WIDTH + 4, height: 0 }, exectime: "1", eventAttrs: [], ports: {
                groups: {
                    [LIST_GROUP_NAME]: Object.assign({ position: itemPosition }, conditionAttributes)
                },
                items: []
            } });
    }
    initialize(...args) {
        this.on('change:ports', () => this.resizeToFitPorts());
        this.resizeToFitPorts();
        this.toggleAddPortButton(LIST_GROUP_NAME);
        super.initialize.call(this, ...args);
    }
    resizeToFitPorts() {
        const { length } = this.getPorts();
        this.toggleAddPortButton(LIST_GROUP_NAME);
        const height = HEADER_HEIGHT + (LIST_ITEM_HEIGHT + LIST_ITEM_GAP) * length + PADDING_L;
        this.prop(['size', 'height'], HEADER_HEIGHT + (LIST_ITEM_HEIGHT + LIST_ITEM_GAP) * length + PADDING_L);
        return height;
    }
    addDefaultPort(label) {
        if (!this.canAddPort(LIST_GROUP_NAME))
            return;
        this.addPort({
            group: LIST_GROUP_NAME,
            attrs: { portLabel: { text: label } }
        });
    }
    getDefaultPortName() {
        const ports = this.getGroupPorts(LIST_GROUP_NAME);
        let portName;
        let i = 1;
        do {
            portName = `${LIST_ITEM_LABEL} ${i++}`;
        } while (ports.find(port => port.attrs.portLabel.text === portName));
        return portName;
    }
    canAddPort(group) {
        return Object.keys(this.getGroupPorts(group)).length < LIST_MAX_PORT_COUNT;
    }
    toggleAddPortButton(group) {
        const buttonAttributes = this.canAddPort(group)
            ? { fill: ACTION_COLOR, cursor: 'pointer' }
            : { fill: 'lightgray', cursor: 'not-allowed' };
        this.attr(['portAddButton'], buttonAttributes, {
            isolate: true
        });
    }
}
exports.customTransition = customTransition;
//# sourceMappingURL=customTrans.js.map

/***/ }),

/***/ "./lib/version.js":
/*!************************!*\
  !*** ./lib/version.js ***!
  \************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

// Copyright (c) Jakob Bucksch
// Distributed under the terms of the Modified BSD License.
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.MODULE_NAME = exports.MODULE_VERSION = void 0;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-var-requires
const data = __webpack_require__(/*! ../package.json */ "./package.json");
/**
 * The _model_module_version/_view_module_version this package implements.
 *
 * The html widget manager assumes that this is the same as the npm package
 * version number.
 */
exports.MODULE_VERSION = data.version;
/*
 * The current package name.
 */
exports.MODULE_NAME = data.name;
//# sourceMappingURL=version.js.map

/***/ }),

/***/ "./lib/widget.js":
/*!***********************!*\
  !*** ./lib/widget.js ***!
  \***********************/
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

// Copyright (c) Jakob Bucksch
// Distributed under the terms of the Modified BSD License.
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PetriView = exports.PetriModel = void 0;
const base_1 = __webpack_require__(/*! @jupyter-widgets/base */ "webpack/sharing/consume/default/@jupyter-widgets/base");
const version_1 = __webpack_require__(/*! ./version */ "./lib/version.js");
const customTrans_1 = __webpack_require__(/*! ./customTrans */ "./lib/customTrans.js");
const joint = __importStar(__webpack_require__(/*! ../node_modules/jointjs/dist/joint */ "./node_modules/jointjs/dist/joint.js"));
__webpack_require__(/*! ../css/widget.css */ "./css/widget.css");
const graphlib_1 = __importDefault(__webpack_require__(/*! graphlib */ "webpack/sharing/consume/default/graphlib/graphlib"));
const dagre_1 = __importDefault(__webpack_require__(/*! dagre */ "./node_modules/dagre/index.js"));
// very important for loading a saved graph (namespace problem)
window.joint = joint;
// Make sure graph.fromJSON() will find the custom shape
Object.assign(joint.shapes, { customTransition: customTrans_1.customTransition });
class PetriModel extends base_1.DOMWidgetModel {
    defaults() {
        return Object.assign(Object.assign({}, super.defaults()), { _model_name: PetriModel.model_name, _model_module: PetriModel.model_module, _model_module_version: PetriModel.model_module_version, _view_name: PetriModel.view_name, _view_module: PetriModel.view_module, _view_module_version: PetriModel.view_module_version, graph: [], caseAttrs: [] });
    }
}
exports.PetriModel = PetriModel;
PetriModel.serializers = Object.assign({}, base_1.DOMWidgetModel.serializers);
PetriModel.model_name = 'PetriModel';
PetriModel.model_module = version_1.MODULE_NAME;
PetriModel.model_module_version = version_1.MODULE_VERSION;
PetriModel.view_name = 'PetriView'; // Set to null if no view
PetriModel.view_module = version_1.MODULE_NAME; // Set to null if no view
PetriModel.view_module_version = version_1.MODULE_VERSION;
class PetriView extends base_1.DOMWidgetView {
    render() {
        // DROPDOWN GRAPH-BUTTON
        var dropdown = document.createElement("div");
        dropdown.className = "dropdown";
        var graphsButton = document.createElement("button");
        graphsButton.className = "button button2";
        graphsButton.innerHTML = '<i class="fa fa-list"></i>' + " Graphs";
        var dropdownContent = document.createElement("div");
        dropdownContent.id = "dropdown-content";
        dropdownContent.className = "dropdown-content";
        var firstExample = document.createElement("a");
        firstExample.textContent = "Example 1";
        firstExample.addEventListener("click", (e) => this.firstExample());
        var secondExample = document.createElement("a");
        secondExample.textContent = "Example 2";
        secondExample.addEventListener("click", (e) => this.secondExample());
        dropdownContent.appendChild(firstExample);
        dropdownContent.appendChild(secondExample);
        dropdown.appendChild(graphsButton);
        dropdown.appendChild(dropdownContent);
        // BUTTONS
        var addToken = document.createElement("button");
        addToken.className = "button button1";
        addToken.addEventListener("click", (e) => this.addToken());
        addToken.innerHTML = '<i class="fa fa-plus"></i>';
        var removeToken = document.createElement("button");
        removeToken.className = "button button1";
        removeToken.addEventListener("click", (e) => this.removeToken());
        removeToken.innerHTML = '<i class="fa fa-minus"></i>';
        var addPlace = document.createElement("button");
        addPlace.className = "button button1";
        addPlace.addEventListener("click", (e) => this.addPlace());
        addPlace.innerHTML = '<i class="fa fa-plus"></i>' + " Place";
        var addTrans = document.createElement("button");
        addTrans.className = "button button1";
        addTrans.addEventListener("click", (e) => this.addTrans());
        addTrans.innerHTML = '<i class="fa fa-plus"></i>' + " Transition";
        var setLayout = document.createElement("button");
        setLayout.className = "button button1";
        setLayout.addEventListener("click", (e) => PetriView.showPopup("layoutPopup"));
        setLayout.innerHTML = '<i class="fa fa-sitemap"></i>' + " Layout";
        var clearAll = document.createElement("button");
        clearAll.className = "button button1";
        clearAll.addEventListener("click", (e) => this.clearAll());
        clearAll.innerHTML = '<i class="fa fa-eraser"></i>' + " Clear";
        var simulate = document.createElement("button");
        simulate.className = "button button1";
        simulate.addEventListener("click", (e) => this.simulate());
        simulate.innerHTML = '<i class="fa fa-caret-right icon-large"></i>' + " Play";
        var stopSimulation = document.createElement("button");
        stopSimulation.className = "button button1";
        stopSimulation.addEventListener("click", (e) => this.stopSimulation());
        stopSimulation.innerHTML = '<i class="fa fa-stop"></i>' + " Stop";
        var lockModel = document.createElement("button");
        lockModel.className = "button button1";
        lockModel.id = "lock";
        lockModel.addEventListener("click", (e) => this.lockModel());
        lockModel.innerHTML = '<i class="fa fa-unlock"></i>' + " Lock";
        var reloadSim = document.createElement("button");
        reloadSim.className = "button button1";
        reloadSim.addEventListener("click", (e) => this.resetSim());
        reloadSim.innerHTML = '<i class="fa fa-refresh"></i>' + " Reset";
        var saveGraph = document.createElement("button");
        saveGraph.className = "button button2";
        saveGraph.addEventListener("click", (e) => PetriView.showPopup("savePopup"));
        saveGraph.innerHTML = '<i class="fa fa-save"></i>' + " Save Graph";
        var saveIMG = document.createElement("button");
        saveIMG.className = "button button2";
        saveIMG.addEventListener("click", (e) => this.saveIMG());
        saveIMG.innerHTML = '<i class="fa fa-download"></i>' + " Download SVG";
        var importJSON = document.createElement("button");
        importJSON.className = "button button2";
        importJSON.addEventListener("click", (e) => PetriView.showPopup("uploadPopup"));
        importJSON.innerHTML = '<i class="fa fa-upload"></i>' + " Import Graph";
        var downloadJSON = document.createElement("button");
        downloadJSON.className = "button button2";
        downloadJSON.addEventListener("click", (e) => PetriView.showPopup("DownloadPopup"));
        downloadJSON.innerHTML = '<i class="fa fa-download"></i>' + " Download Graph";
        var zoomIn = document.createElement("button");
        zoomIn.className = "button button2";
        zoomIn.addEventListener("click", (e) => PetriView.zoomIt(1));
        zoomIn.innerHTML = '<i class="fa fa-search-plus"></i>' + " Zoom in";
        var zoomOut = document.createElement("button");
        zoomOut.className = "button button2";
        zoomOut.addEventListener("click", (e) => PetriView.zoomIt(-1));
        zoomOut.innerHTML = '<i class="fa fa-search-minus"></i>' + " Zoom out";
        var addAttrs = document.createElement("button");
        addAttrs.className = "button button1";
        addAttrs.addEventListener("click", (e) => PetriView.showPopup("attrPopup"));
        addAttrs.innerHTML = '<i class="fa fa-plus"></i>' + " Attributes";
        // DOWNLOAD-POPUP
        var downPopup = document.createElement("div");
        downPopup.id = "DownloadPopup";
        downPopup.className = "popup";
        downPopup.style.display = "none";
        var downPopupContent = document.createElement("div");
        downPopupContent.id = "DownloadPopupContent";
        downPopupContent.className = "popup-content";
        downPopupContent.style.display = "flex";
        var JSONButton = document.createElement("button");
        JSONButton.id = "JSONButton";
        JSONButton.className = "button button1";
        JSONButton.innerHTML = "JSON";
        JSONButton.addEventListener("click", (e) => this.downloadJSON());
        var PNMLButton = document.createElement("button");
        PNMLButton.id = "PNMLButton";
        PNMLButton.className = "button button1";
        PNMLButton.innerHTML = "PNML";
        PNMLButton.addEventListener("click", (e) => this.downloadPNML());
        downPopupContent.append(JSONButton, PNMLButton);
        downPopup.appendChild(downPopupContent);
        // ATTRIBUTES-POPUP
        var attrPopup = document.createElement("div");
        attrPopup.id = "attrPopup";
        attrPopup.className = "popup";
        attrPopup.style.display = "none";
        var attrPopupContent = document.createElement("div");
        attrPopupContent.className = "popup-content attributes";
        attrPopupContent.id = "attrPopupContent";
        var caseTab = document.createElement("button");
        caseTab.id = "caseTab";
        caseTab.className = "tablinks active";
        caseTab.textContent = "Add Case-Attributes";
        caseTab.addEventListener("click", (e) => PetriView.showTab(caseTab.id));
        var eventTab = document.createElement("button");
        eventTab.id = "eventTab";
        eventTab.className = "tablinks";
        eventTab.textContent = "Add Event-Attributes";
        eventTab.addEventListener("click", (e) => PetriView.showTab(eventTab.id));
        var tabBar = document.createElement("div");
        tabBar.id = "tabBar";
        tabBar.className = "tab";
        tabBar.style.display = "flex";
        tabBar.append(caseTab, eventTab);
        var caseAttrsList = document.createElement('ul');
        caseAttrsList.id = "caseAttrsList";
        var observer = new MutationObserver(() => this.updateCaseAttrs());
        observer.observe(caseAttrsList, { childList: true });
        var attrName = document.createElement("input");
        attrName.id = "attrName";
        attrName.type = "text";
        attrName.placeholder = "Name your attribute...";
        attrName.oninput = this.enableAttributeButtons;
        var check0 = document.createElement("input");
        check0.type = "radio";
        check0.id = "staticAttr";
        check0.name = "dist";
        check0.addEventListener("change", (e) => this.toggleFields(check0.id));
        var label0 = document.createElement("label");
        label0.htmlFor = "staticAttr";
        label0.textContent = "List with probabilities";
        var div0 = document.createElement("div");
        div0.style.display = "flex";
        div0.append(check0, label0);
        var staticValue = document.createElement("input");
        staticValue.id = "staticVal";
        staticValue.placeholder = '"item0", "item1", "item2", ...';
        staticValue.style.display = "none";
        var staticProbs = document.createElement("input");
        staticProbs.id = "staticProbs";
        staticProbs.placeholder = "Probabilities summing to one...";
        staticProbs.style.display = "none";
        var check1 = document.createElement("input");
        check1.type = "radio";
        check1.id = "normalDist";
        check1.name = "dist";
        check1.addEventListener("change", (e) => this.toggleFields(check1.id));
        var label1 = document.createElement("label");
        label1.htmlFor = "normalDist";
        label1.textContent = "Normal Distribution";
        var div1 = document.createElement("div");
        div1.style.display = "flex";
        div1.append(check1, label1);
        var mue = document.createElement("input");
        mue.id = "mue";
        mue.type = "number";
        mue.placeholder = "Select mean...";
        mue.style.display = "none";
        var sigma = document.createElement("input");
        sigma.id = "sigma";
        sigma.type = "number";
        sigma.placeholder = "Select sigma...";
        sigma.style.display = "none";
        var check2 = document.createElement("input");
        check2.type = "radio";
        check2.id = "bernDist";
        check2.name = "dist";
        check2.addEventListener("change", (e) => this.toggleFields(check2.id));
        var label2 = document.createElement("label");
        label2.htmlFor = "bernDist";
        label2.textContent = "Bernoulli Distribution";
        label2.append(check2);
        var div2 = document.createElement("div");
        div2.style.display = "flex";
        div2.append(check2, label2);
        var n = document.createElement("input");
        n.id = "n";
        n.placeholder = "Choose n...";
        n.type = "number";
        n.min = "0";
        n.step = "1";
        n.style.display = "none";
        var p = document.createElement("input");
        p.id = "p";
        p.placeholder = "Choose p...";
        p.type = "number";
        p.min = "0";
        p.max = "1";
        p.step = "0.01";
        p.style.display = "none";
        var check3 = document.createElement("input");
        check3.type = "radio";
        check3.id = "gammaDist";
        check3.name = "dist";
        check3.addEventListener("change", (e) => this.toggleFields(check3.id));
        var label3 = document.createElement("label");
        label3.htmlFor = "gammaDist";
        label3.textContent = "Gamma Distribution";
        var div3 = document.createElement("div");
        div3.style.display = "flex";
        div3.append(check3, label3);
        var k = document.createElement("input");
        k.id = "k";
        k.placeholder = "Choose k...";
        k.type = "number";
        k.min = "0";
        k.style.display = "none";
        var theta = document.createElement("input");
        theta.id = "theta";
        theta.placeholder = "Choose theta...";
        theta.type = "number";
        theta.min = "0";
        theta.style.display = "none";
        var check4 = document.createElement("input");
        check4.type = "radio";
        check4.id = "expoDist";
        check4.name = "dist";
        check4.addEventListener("change", (e) => this.toggleFields(check4.id));
        var label4 = document.createElement("label");
        label4.htmlFor = "expoDist";
        label4.textContent = "Exponential Distribution";
        var div4 = document.createElement("div");
        div4.style.display = "flex";
        div4.append(check4, label4);
        var beta = document.createElement("input");
        beta.id = "beta";
        beta.placeholder = "Choose beta...";
        beta.type = "number";
        beta.min = "0";
        beta.style.display = "none";
        var addCaseAttributes = document.createElement("button");
        addCaseAttributes.className = "button button1";
        addCaseAttributes.id = "addCaseAttributes";
        addCaseAttributes.textContent = "Add Case-Attribute!";
        addCaseAttributes.disabled = true;
        addCaseAttributes.addEventListener("click", (e) => this.addAttributes());
        var caseTabContent = document.createElement("div");
        caseTabContent.id = "caseTabContent";
        caseTabContent.style.display = "block";
        var eventTabContent = document.createElement("div");
        eventTabContent.id = "eventTabContent";
        eventTabContent.style.display = "none";
        var eventHeader = document.createElement("p");
        eventHeader.id = "eventHeader";
        eventHeader.style.marginLeft = "1px";
        eventHeader.textContent = "Select the transition to be linked:";
        var transList = document.createElement("ul");
        transList.id = "transList";
        transList.style.columns = "2";
        var addEventAttributes = document.createElement("button");
        addEventAttributes.className = "button button1";
        addEventAttributes.id = "addEventAttributes";
        addEventAttributes.textContent = "Add Event-Attribute!";
        addEventAttributes.disabled = true;
        addEventAttributes.addEventListener("click", (e) => this.addAttributes());
        var eventAttrsList = document.createElement('ul');
        eventAttrsList.id = "eventAttrsList";
        caseTabContent.append(addCaseAttributes, caseAttrsList);
        eventTabContent.append(eventHeader, transList, addEventAttributes, eventAttrsList);
        attrPopupContent.append(tabBar, attrName, div0, staticValue, staticProbs, div1, mue, sigma, div2, n, p, div3, k, theta, div4, beta, caseTabContent, eventTabContent);
        attrPopup.append(attrPopupContent);
        // LAYOUT-POPUP
        var layoutPopup = document.createElement("div");
        layoutPopup.id = "layoutPopup";
        layoutPopup.className = "popup";
        layoutPopup.style.display = "none";
        var layoutContent = document.createElement("div");
        layoutContent.className = "popup-content";
        var nodeSep = document.createElement("input");
        nodeSep.min = "1";
        nodeSep.max = "200";
        nodeSep.value = "50";
        nodeSep.type = "range";
        nodeSep.id = "nodeSepInput";
        nodeSep.className = "slider";
        nodeSep.oninput = (e) => { nodeSpan.innerHTML = nodeSep.value; };
        var nodeP = document.createElement("p");
        nodeP.innerHTML = "Node Separation: ";
        var nodeSpan = document.createElement("span");
        nodeSpan.innerHTML = nodeSep.value;
        nodeP.appendChild(nodeSpan);
        var edgeSep = document.createElement("input");
        edgeSep.min = "1";
        edgeSep.max = "200";
        edgeSep.value = "50";
        edgeSep.type = "range";
        edgeSep.id = "edgeSepInput";
        edgeSep.className = "slider";
        edgeSep.oninput = (e) => { edgeSpan.innerHTML = edgeSep.value; };
        var edgeP = document.createElement("p");
        edgeP.innerHTML = "Edge Separation: ";
        var edgeSpan = document.createElement("span");
        edgeSpan.innerHTML = edgeSep.value;
        edgeP.appendChild(edgeSpan);
        var rankSep = document.createElement("input");
        rankSep.min = "1";
        rankSep.max = "200";
        rankSep.value = "50";
        rankSep.type = "range";
        rankSep.id = "rankSepInput";
        rankSep.className = "slider";
        rankSep.oninput = (e) => { rankSpan.innerHTML = rankSep.value; };
        var rankP = document.createElement("p");
        rankP.innerHTML = "Rank Separation: ";
        var rankSpan = document.createElement("span");
        rankSpan.innerHTML = rankSep.value;
        rankP.appendChild(rankSpan);
        var orientationP = document.createElement("p");
        orientationP.innerHTML = "Orientation: ";
        var selectDiv = document.createElement("div");
        selectDiv.className = "select";
        var layoutDir = document.createElement("select");
        layoutDir.id = "layoutDir";
        layoutDir.value = "LR";
        var dirOption1 = document.createElement("option");
        dirOption1.label = "Left-Right";
        dirOption1.value = "LR";
        dirOption1.selected = true;
        var dirOption2 = document.createElement("option");
        dirOption2.label = "Bottom-Top";
        dirOption2.value = "BT";
        var dirOption3 = document.createElement("option");
        dirOption3.label = "Top-Bottom";
        dirOption3.value = "TB";
        var dirOption4 = document.createElement("option");
        dirOption4.label = "Right-Left";
        dirOption4.value = "RL";
        layoutDir.append(dirOption1, dirOption2, dirOption3, dirOption4);
        selectDiv.appendChild(layoutDir);
        var confirmButton = document.createElement("button");
        confirmButton.className = "button button1";
        confirmButton.style.marginTop = "5px";
        confirmButton.innerHTML = "Set Layout!";
        confirmButton.addEventListener("click", (e) => this.resetLayout());
        layoutContent.append(orientationP, selectDiv, nodeP, nodeSep, edgeP, edgeSep, rankP, rankSep, confirmButton);
        layoutPopup.appendChild(layoutContent);
        // UPLOAD-POPUP
        var uploadPopup = document.createElement("div");
        uploadPopup.id = "uploadPopup";
        uploadPopup.className = "popup";
        uploadPopup.style.display = "none";
        var uploadPopupContent = document.createElement("div");
        uploadPopupContent.className = "popup-content";
        var fileInput = document.createElement("input");
        fileInput.className = "fileinput";
        fileInput.id = "fileInput";
        fileInput.type = "file";
        fileInput.accept = "application/JSON,.pnml";
        fileInput.style.display = "none";
        fileInput.addEventListener("change", (e) => this.showFileName());
        var label = document.createElement("label");
        label.htmlFor = "fileInput";
        label.className = "uploadLabel";
        label.textContent = "JSON or PNML-File...";
        var uploadJSON = document.createElement("button");
        uploadJSON.id = "uploadJSON";
        uploadJSON.className = "button button1";
        uploadJSON.textContent = "Import Graph!";
        uploadJSON.addEventListener("click", (e) => PetriView.importJSON());
        uploadPopupContent.append(label, fileInput, uploadJSON);
        uploadPopup.appendChild(uploadPopupContent);
        // LINK-POPUP
        var linkPopup = document.createElement("div");
        linkPopup.id = "linkPopup";
        linkPopup.className = "popup";
        linkPopup.style.display = "none";
        var linkInput = document.createElement("input");
        linkInput.placeholder = "Enter probability...";
        linkInput.id = "linkInput";
        linkInput.type = "number";
        linkInput.step = "0.01";
        linkInput.min = "0.00";
        linkInput.max = "1.00";
        linkInput.defaultValue = "1.00";
        var changeProb = document.createElement("button");
        changeProb.id = "changeProb";
        changeProb.className = "button button1";
        changeProb.addEventListener("click", (e) => PetriView.changeProb());
        changeProb.textContent = "Change Probability!";
        var linkPopupContent = document.createElement("div");
        linkPopupContent.className = "popup-content";
        linkPopupContent.append(linkInput, changeProb);
        linkPopup.appendChild(linkPopupContent);
        // LABEL-POPUP
        var popup = document.createElement("div");
        popup.id = "popup";
        popup.className = "popup";
        popup.style.display = "none";
        var headerText = document.createElement("p");
        headerText.textContent = "Label:";
        var input = document.createElement("input");
        input.placeholder = "Enter label...";
        input.id = "input";
        input.type = "text";
        input.oninput = this.enableLabelButton;
        var changeLabel = document.createElement("button");
        changeLabel.id = "changelabel";
        changeLabel.className = "button button1";
        changeLabel.addEventListener("click", (e) => PetriView.saveChanges());
        changeLabel.disabled = true;
        changeLabel.textContent = "Save!";
        var headerText1 = document.createElement("p");
        headerText1.id = "timeLabel";
        headerText1.textContent = "Duration in seconds:";
        headerText1.style.display = "none";
        var addTime = document.createElement("input");
        addTime.placeholder = "In seconds...";
        addTime.id = "timeInput";
        addTime.type = "number";
        addTime.min = "1";
        addTime.defaultValue = "1";
        addTime.style.display = "none";
        var popupContent = document.createElement("div");
        popupContent.className = "popup-content";
        popupContent.append(headerText, input, headerText1, addTime, changeLabel);
        popup.appendChild(popupContent);
        // CONDITION-POPUP
        var condPopup = document.createElement("div");
        condPopup.className = "popup";
        condPopup.id = "condPopup";
        condPopup.style.display = "none";
        var description = document.createElement("p");
        description.textContent = "Add conditions:";
        description.id = "descriptionID";
        var conditions = document.createElement("input");
        conditions.placeholder = "E.g.: costs > 500, ...";
        conditions.id = "conditionInput";
        var addConditions = document.createElement("button");
        addConditions.id = "addConditions";
        addConditions.className = "button button1";
        addConditions.textContent = "Add Conditions!";
        addConditions.addEventListener("click", (e) => PetriView.saveConditions());
        var condPopupContent = document.createElement("div");
        condPopupContent.className = "popup-content";
        condPopupContent.append(description, conditions, addConditions);
        condPopup.appendChild(condPopupContent);
        // SAVE-POPUP
        var savePopup = document.createElement("div");
        savePopup.id = "savePopup";
        savePopup.className = "popup";
        savePopup.style.display = "none";
        var savePopupContent = document.createElement("div");
        savePopupContent.className = "popup-content";
        var saveInput = document.createElement("input");
        saveInput.placeholder = "Enter graphname...";
        saveInput.id = "graphNameInput";
        saveInput.type = "text";
        saveInput.oninput = this.enableSaveButton;
        var saveGraphAs = document.createElement("button");
        saveGraphAs.id = "saveGraphAs";
        saveGraphAs.className = "button button1";
        saveGraphAs.addEventListener("click", (e) => PetriView.saveGraph());
        saveGraphAs.disabled = true;
        saveGraphAs.textContent = "Save Graph!";
        savePopupContent.append(saveInput, saveGraphAs);
        savePopup.appendChild(savePopupContent);
        // ADD EVERYTHING TO NOTEBOOK HTML CODE
        this.el.append(dropdown, saveGraph, importJSON, saveIMG, downloadJSON, zoomIn, zoomOut, addPlace, addTrans, addToken, removeToken, setLayout, clearAll, lockModel, simulate, stopSimulation, reloadSim, addAttrs);
        this.el.append(popup, linkPopup, savePopup, uploadPopup, downPopup, condPopup, attrPopup, layoutPopup);
        // Init paper, give it the respective ID, restrict its elements moving area and append it
        this.initWidget();
        PetriView.paper.el.id = "paper";
        PetriView.paper.options.restrictTranslate = function (cellView) { return cellView.paper.getArea(); };
        this.el.appendChild(PetriView.paper.el);
        // If clicked outside of any popup-form, do not display it anymore (under conditions)
        window.onclick = function (event) {
            if (PetriView.selectedCell) {
                if (event.target.className === "popup" && (PetriView.selectedCell.attributes.type != "customTransition" ||
                    PetriView.selectedCell.attributes.attrs["label"]["text"] != "")) {
                    event.target.style.display = "none";
                    $("#changelabel").prop("disabled", true);
                    PetriView.selectedCell = null;
                }
            } // to disable savegraph-popup:
            else if (event.target.className == "popup") {
                event.target.style.display = "none";
                document.getElementById("graphNameInput").value = "";
                $("#saveGraphAs").prop("disabled", true);
            }
        };
        // Click popup-buttons on keyboardinput "enter"
        document.addEventListener("keydown", function (e) {
            if (e.key == "Enter") {
                if (popup.style.display != "none" && !document.getElementById("changelabel").disabled) {
                    PetriView.saveChanges();
                }
                else if (savePopup.style.display != "none" && !document.getElementById("saveGraphAs").disabled) {
                    PetriView.saveGraph();
                }
                else if (uploadPopup.style.display != "none") {
                    PetriView.importJSON();
                }
                else if (condPopup.style.display != "none") {
                    PetriView.saveConditions();
                }
                else if (linkPopup.style.display != "none") {
                    PetriView.changeProb();
                }
            }
        });
        // Paper on-click, -doubleclick, -drag, -alt-drag and on-hover functionalities
        PetriView.paper.on({
            // while alt-key is pressed cell is locked and you can connect it by dragging with mouseclick
            // otherwise the cell stroke is simply colored red
            'cell:pointerdown': function (cellView, evt) {
                if (evt.altKey) {
                    jQuery('.joint-element').css("cursor", "crosshair");
                    evt.data = cellView.model.position();
                    this.findViewByModel(cellView.model).setInteractivity(false);
                }
                else {
                    jQuery('.joint-element').css("cursor", "move");
                }
                // Reset "old" selectedCell-stroke if slectedCell is not the same as cellView
                if (PetriView.selectedCell != null && PetriView.selectedCell != cellView.model) {
                    if (PetriView.selectedCell.attributes.type == "pn.Place") {
                        PetriView.selectedCell.attr({ ".root": { "stroke": "#7c68fc" } });
                    }
                    else {
                        PetriView.selectedCell.attr({ "body": { "stroke": "#7c68fc" } });
                    }
                }
                if (cellView.model.attributes.type == "pn.Place") {
                    cellView.model.attr({ ".root": { "stroke": (cellView.model.attributes.attrs[".root"]["stroke"] == "red") ? "#7c68fc" : "red" } });
                }
                else if (cellView.model.attributes.type == "customTransition") {
                    cellView.model.attr({ "body": { "stroke": (cellView.model.attributes.attrs["body"]["stroke"] == "red") ? "#7c68fc" : "red" } });
                }
                PetriView.selectedCell = cellView.model;
            },
            // if a blank part of paper is clicked, disselect the cell and set dragStartPosition
            'blank:pointerdown': function (evt, x, y) {
                PetriView.dragStartPosition = { x: x, y: y };
                if (PetriView.selectedCell) {
                    if (PetriView.selectedCell.attributes.type == "pn.Place") {
                        PetriView.selectedCell.attr({ ".root": { "stroke": "#7c68fc" } });
                    }
                    else {
                        PetriView.selectedCell.attr({ "body": { "stroke": "#7c68fc" } });
                    }
                    PetriView.selectedCell = null;
                }
            },
            // Reset dragStartPosition
            'blank:pointerup cell:pointerup': function () {
                PetriView.dragStartPosition = null;
            },
            // Make paper draggable (mind the scaling)
            'blank:pointermove element:pointermove': function (event) {
                if (document.querySelector('#lock').textContent == " Lock") {
                    if (PetriView.dragStartPosition) {
                        var scale = PetriView.paper.scale();
                        PetriView.paper.translate(event.offsetX - PetriView.dragStartPosition.x * scale.sx, event.offsetY - PetriView.dragStartPosition.y * scale.sy);
                    }
                }
            },
            // when mousebutton is lifted up while altkey is pressed a link is created between source and destination
            // if altkey is not pressed simply unlock the cell again (only if Lock-Button was not pressed)
            'cell:pointerup': function (cellView, evt, x, y) {
                jQuery('.joint-element').css("cursor", "move");
                if (document.querySelector('#lock').textContent == " Lock") {
                    this.findViewByModel(cellView.model).setInteractivity(true);
                }
                if (evt.altKey) {
                    var connect = true;
                    var coordinates = new joint.g.Point(x, y);
                    var elementAbove = cellView.model;
                    var elementBelow = this.model.findModelsFromPoint(coordinates).find(function (cell) {
                        return (cell.id !== elementAbove.id);
                    });
                    if (typeof (elementAbove) == 'undefined') {
                        PetriView.graph.getConnectedLinks(elementBelow).forEach(link => {
                            if (link.attributes.source.id == elementAbove.id) {
                                connect = false;
                            }
                        });
                    }
                    // If the two elements are connected in that direction already or have the same cell type, don't connect them (again).
                    if (elementBelow && (elementAbove.attributes.type != elementBelow.attributes.type) &&
                        (elementAbove.attributes.type != "pn.Link") && (elementBelow.attributes.type != "pn.Link") && connect) {
                        // Move the cell to the position before dragging and create a connection afterwards.
                        elementAbove.position(evt.data.x, evt.data.y);
                        PetriView.graph.addCell(PetriView.link(elementAbove, elementBelow));
                    }
                }
            },
            // Add small remove-options on hover above places and transitions
            'cell:mouseenter': (elementView) => {
                if (document.querySelector('#lock').textContent == " Lock") {
                    var x = "95%";
                    var y = "30%";
                    if (elementView.model.attributes.type == "customTransition") {
                        var x = "98%";
                        var y = "0%";
                    }
                    if (elementView.model.attributes.type != "pn.Link") {
                        elementView.addTools(new joint.dia.ToolsView({
                            tools: [
                                new joint.elementTools.Remove({
                                    useModelGeometry: true,
                                    x: x,
                                    y: y,
                                    action: function (evt) {
                                        if (elementView.model.attributes.type == "customTransition") {
                                            var transName = elementView.model.attributes.attrs["label"]["text"];
                                            PetriView.eventAttrs = PetriView.eventAttrs.filter(attr => attr.split(" -> ")[0] !== transName);
                                            PetriView.updateAttrsFrontend("eventAttrsList");
                                        }
                                        elementView.model.remove({ ui: true });
                                        PetriView.updateTransList();
                                    },
                                }),
                            ],
                        }));
                    }
                }
            },
            // remove small remove-options as soon as mouse leaves the cell
            'element:mouseleave': (elementView) => {
                elementView.removeTools();
            },
            // Allow changing the label upon doubleclicking a place or transition
            'cell:pointerdblclick': function () {
                if (PetriView.selectedCell.attributes.type == "pn.Link") {
                    PetriView.showPopup("linkPopup");
                }
                else if (PetriView.selectedCell.attributes.type == "pn.Place") {
                    document.getElementById("timeLabel").style.display = "none";
                    document.getElementById("timeInput").style.display = "none";
                    $("#changelabel").prop("disabled", false);
                    PetriView.showPopup("popup");
                }
                else if (PetriView.selectedCell.attributes.type == "customTransition" && PetriView.selectedCell.attributes.attrs["body"]["text"] != "") {
                    document.getElementById("timeLabel").style.display = "flex";
                    document.getElementById("timeInput").style.display = "flex";
                    document.getElementById("timeInput").value = PetriView.selectedCell.attributes.exectime;
                    $("#changelabel").prop("disabled", false);
                    PetriView.showPopup("popup");
                }
            },
            'element:port:remove': function (elementView, evt) {
                evt.stopPropagation();
                const portId = elementView.findAttribute('port', evt.target);
                const message = elementView.model;
                message.removePort(portId);
            },
            'element:port:add': function (elementView, evt) {
                evt.stopPropagation();
                if (PetriView.selectedCell) {
                    if (PetriView.selectedCell.attributes.type == "pn.Place") {
                        PetriView.selectedCell.attr({ ".root": { "stroke": "#7c68fc" } });
                    }
                    else {
                        PetriView.selectedCell.attr({ "body": { "stroke": "#7c68fc" } });
                    }
                }
                PetriView.selectedCell = elementView.model;
                if (elementView.model.attributes.attrs["portAddButton"]["fill"] != "lightgray") {
                    PetriView.showPopup("condPopup");
                }
            },
        });
        // UPDATE TYPESCRIPT FROM PYTHON: (alternatively on_some_change)
        this.model.on("change:graph", this.updateGraph, this);
        // UPDATING PYTHON BASED ON TYPESCRIPT
        PetriView.graph.on("change", this.updateGraph.bind(this), this);
        PetriView.graph.on('change:property', this.updateGraph.bind(this), this);
    }
    initWidget() {
        const namespace = joint.shapes;
        PetriView.graph = new joint.dia.Graph({ cellNamespace: namespace });
        PetriView.gridSize = 1;
        PetriView.selectedCell = null;
        PetriView.backupTokens = null;
        this.simulationId = 0;
        this.width = jQuery('#paper').width;
        this.height = jQuery('#paper').height;
        PetriView.paper = new joint.dia.Paper({
            el: document.createElement("div"),
            width: this.width,
            height: this.height,
            drawGrid: false,
            gridSize: PetriView.gridSize,
            defaultAnchor: { name: 'perpendicular' },
            defaultConnectionPoint: { name: 'boundary' },
            model: PetriView.graph,
            cellViewNamespace: namespace,
            linkPinning: false,
            snapLabels: true,
            interactive: {
                "linkMove": true,
                "labelMove": true,
                "arrowheadMove": false,
                "vertexMove": false,
                "vertexAdd": false,
                "vertexRemove": false,
                "useLinkTools": false
            }
        });
    }
    updateCaseAttrs() {
        this.model.set("caseAttrs", PetriView.caseAttrs);
        this.model.save_changes();
        this.model.sync("update", this.model);
    }
    updateGraph() {
        var allCells = PetriView.graph.getCells();
        // allCells.concat(PetriView.graph.getLinks());
        var res = [];
        allCells.forEach(function (cell) {
            if (cell.attributes.type == "pn.Place") {
                var id = cell.attributes.id;
                var name = cell.attributes.attrs[".label"]["text"];
                var tokens = cell.attributes.tokens;
                var type = "Place";
                res.push({ type, id, name, tokens });
            }
            else if (cell.attributes.type == "pn.Link") {
                var id = cell.attributes.id;
                var prob = Number(cell.attributes.labels[0]["attrs"]["text"]["text"]);
                var source = cell.attributes.source.id;
                var target = cell.attributes.target.id;
                var type = "Link";
                res.push({ type, id, prob, source, target });
            }
            else if (cell.attributes.type == "customTransition") {
                var id = cell.id;
                var name = cell.attributes.attrs["label"]["text"];
                var type = "Transition";
                var exectime = cell.attributes.exectime;
                var eventattrs = cell.attributes.eventAttrs;
                var conditions = [];
                cell.attributes.ports.items.forEach(function (item) {
                    conditions.push(item["attrs"]["portLabel"]["text"]);
                });
                res.push({ type, id, name, exectime, conditions, eventattrs });
            }
        });
        PetriView.updateTransList();
        this.model.set("graph", res);
        this.model.save_changes();
    }
    showFileName() {
        var file = $('#fileInput')[0].files[0].name;
        $('#fileInput').prev('label').text(file);
    }
    static zoomIt(delta) {
        var MIN_ZOOM = 0.2;
        var MAX_ZOOM = 3;
        var currentZoom = PetriView.paper.scale().sx;
        if (document.querySelector('#lock').textContent == " Lock") {
            var newZoom = currentZoom + 0.2 * delta;
            if (newZoom >= MIN_ZOOM && newZoom <= MAX_ZOOM) {
                // PetriView.paper.translate(0, 0);
                PetriView.paper.scale(newZoom, newZoom);
            }
        }
    }
    static getTokenlist(cells) {
        var tokenlist = [];
        cells.forEach(function (c) {
            if (c.attributes.type == "pn.Place") {
                tokenlist.push(c.get("tokens"));
            }
        });
        return tokenlist;
    }
    firstExample() {
        this.clearAll();
        // Define Places
        var pReady = new joint.shapes.pn.Place({
            position: { x: 140, y: 50 },
            attrs: {
                '.label': {
                    'text': 'ready',
                    'fill': '#7c68fc',
                    'font-size': 20,
                    'font-weight': 'bold'
                },
                '.root': {
                    'stroke': '#7c68fc',
                    'stroke-width': 3,
                },
                '.alot > text': {
                    'fill': '#fe854c',
                    'font-family': 'Courier New',
                    'font-size': 20,
                    'font-weight': 'bold',
                    'ref-x': 0.5,
                    'ref-y': 0.5,
                    'y-alignment': -0.5,
                    'transform': null
                },
                '.tokens > circle': {
                    'fill': '#7a7e9b'
                }
            },
            tokens: 1,
        });
        var pIdle = pReady.clone()
            .attr('.label/text', 'idle')
            .position(140, 260)
            .set('tokens', 2);
        var buffer = pReady.clone()
            .position(363, 150)
            .set('tokens', 12)
            .attr({
            '.label': {
                'text': 'buffer'
            },
        });
        var cAccepted = pReady.clone()
            .attr('.label/text', 'accepted')
            .position(600, 50)
            .set('tokens', 1);
        var cReady = pReady.clone()
            .attr('label/text', 'accepted')
            .position(600, 260)
            .set('ready', 3);
        // Define Transitions
        var tProduce = new customTrans_1.customTransition({
            position: { x: 20, y: 170 },
            attrs: {
                'label': {
                    'text': 'produce',
                    'fill': '#fe854f'
                },
            },
        });
        var tSend = tProduce.clone()
            .attr('label/text', 'send')
            .position(180, 170);
        var tAccept = tProduce.clone()
            .attr('label/text', 'accept')
            .position(485, 170);
        var tConsume = tProduce.clone()
            .attr('label/text', 'consume')
            .position(645, 170);
        // add cells to graph and create links
        PetriView.graph.addCell([pReady, pIdle, buffer, cAccepted, cReady, tProduce, tSend, tAccept, tConsume]);
        PetriView.graph.addCell([
            PetriView.link(tProduce, pReady), PetriView.link(pReady, tSend), PetriView.link(tSend, pIdle), PetriView.link(pIdle, tProduce),
            PetriView.link(tSend, buffer), PetriView.link(buffer, tAccept), PetriView.link(tAccept, cAccepted),
            PetriView.link(cAccepted, tConsume), PetriView.link(tConsume, cReady), PetriView.link(cReady, tAccept)
        ]);
        this.updateGraph();
        PetriView.backupTokens = PetriView.getTokenlist(PetriView.graph.getCells());
    }
    secondExample() {
        this.clearAll();
        var pA1 = new joint.shapes.pn.Place({
            position: { x: 50, y: 150 },
            attrs: {
                '.label': {
                    'text': 'A1',
                    'fill': '#7c68fc',
                    'font-size': 12,
                    'font-weight': 'bold'
                },
                '.root': {
                    'stroke': '#7c68fc',
                    'stroke-width': 3,
                },
                '.alot > text': {
                    'fill': '#fe854c',
                    'font-family': 'Courier New',
                    'font-size': 20,
                    'font-weight': 'bold',
                    'ref-x': 0.5,
                    'ref-y': 0.5,
                    'y-alignment': -0.5,
                    'transform': null
                },
                '.tokens > circle': {
                    'fill': '#7a7e9b',
                }
            },
            tokens: 1,
        });
        var pA2 = pA1.clone()
            .attr('.label/text', 'A2')
            .position(200, 150)
            .set('tokens', 0);
        var pConnector = pA1.clone()
            .position(350, 150)
            .attr({
            '.label': {
                'text': 'Connector'
            },
        });
        var pB1 = pA1.clone()
            .attr('.label/text', 'B1')
            .position(650, 150);
        var pB2 = pA1.clone()
            .position(500, 150)
            .set('tokens', 0)
            .attr('.label/text', 'B2');
        // Define Transitions
        var tA1 = new customTrans_1.customTransition({
            position: { x: 160, y: 30 },
            attrs: {
                'label': {
                    'fill': '#fe854f',
                    'text': "Transition A1"
                },
                'body': {
                    'fill': '#9586fd',
                    'stroke': '#7c68fc'
                },
            },
        });
        var tA2 = tA1.clone()
            .position(160, 300)
            .attr('label/text', 'Transition A2');
        var tB1 = tA1.clone()
            .position(460, 300)
            .attr('label/text', 'Transition B1');
        var tB2 = tA1.clone()
            .position(460, 30)
            .attr('label/text', 'Transition B2');
        // add cells to graph and create links
        PetriView.graph.addCell([pA1, pA2, pConnector, pB1, pB2, tA1, tA2, tB1, tB2]);
        PetriView.graph.addCell([
            PetriView.link(pA1, tA1), PetriView.link(tA1, pA2), PetriView.link(pA2, tA2), PetriView.link(tA2, pA1), PetriView.link(tA2, pConnector),
            PetriView.link(pConnector, tA1), PetriView.link(pConnector, tB1), PetriView.link(tB1, pB2), PetriView.link(pB2, tB2), PetriView.link(tB2, pConnector),
            PetriView.link(tB2, pB1), PetriView.link(pB1, tB1)
        ]);
        this.updateGraph();
        PetriView.backupTokens = PetriView.getTokenlist(PetriView.graph.getCells());
    }
    static link(a, b) {
        return new joint.shapes.pn.Link({
            source: { id: a.id, selector: '.root' },
            target: { id: b.id, selector: '.root' },
            // creates little jumps over other links
            connector: { name: 'jumpover',
                args: { size: 5 }
            },
            z: -1,
            attrs: {
                text: {
                    fill: '#000000',
                    fontSize: 10,
                    textAnchor: 'middle',
                    textVerticalAnchor: 'middle',
                    yAlignment: 'bottom',
                    pointerEvents: 'cell:pointerdblclick',
                    cursor: "move",
                },
                '.connection': {
                    'fill': 'none',
                    'stroke-linejoin': 'round',
                    'stroke-width': '2',
                    'stroke': '#4b4a67',
                },
                '.connection-wrap': {
                    'fill': 'none'
                },
            },
            // Hides the standard background-rect of the label
            defaultLabel: {
                markup: [{ tagName: 'text', selector: 'text' }],
                attrs: {
                    text: {
                        fill: '#000000',
                        fontSize: 10,
                        textAnchor: 'middle',
                        textVerticalAnchor: 'middle',
                        yAlignment: 'bottom',
                        pointerEvents: 'none'
                    }
                },
            },
            labels: [
                {
                    attrs: { text: { text: "1.00" } },
                    position: { args: { keepGradient: true, ensureLegibility: true } }
                }
            ]
        });
    }
    addToken() {
        try {
            if (PetriView.selectedCell.attributes.type != "pn.Place") {
                return "You cannot add tokens to transitions! Please select a place instead.";
                // console.log("You cannot add tokens to transitions! Please select a place instead.");
            }
            else {
                PetriView.selectedCell.set('tokens', PetriView.selectedCell.get('tokens') + 1);
                PetriView.backupTokens = PetriView.getTokenlist(PetriView.graph.getCells());
            }
        }
        catch (e) {
            return "Nothing selected! Please select a place before adding a token.";
        }
    }
    removeToken() {
        try {
            if (PetriView.selectedCell.attributes.type != "pn.Place") {
                return "You cannot remove tokens from transitions! Please select a place instead.";
            }
            else {
                if (PetriView.selectedCell.get('tokens') > 0) {
                    PetriView.selectedCell.set('tokens', PetriView.selectedCell.get('tokens') - 1);
                    PetriView.backupTokens = PetriView.getTokenlist(PetriView.graph.getCells());
                }
            }
        }
        catch (e) {
            return "Nothing selected! Please select a place before removing a token.";
        }
    }
    static showPopup(id) {
        var _a;
        document.getElementById(id).style.display = "flex";
        // set focus to first input-field in popup
        if (id != "layoutPopup" && id != "downloadPopup") {
            var inputField = (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.getElementsByTagName("input")[0];
            document.getElementById(inputField.id).focus();
            // Set value of labelPopup-Input based on selected Link
            // slice creates a copy of last element --> so actually "labels" is not changed by "pop()"
            if (id == "linkPopup") {
                inputField.value = PetriView.selectedCell.attributes.labels.slice(-1).pop()["attrs"]["text"]["text"];
            }
        }
    }
    addPlace() {
        var x = PetriView.paper.paperToLocalPoint(0, 0).x + 20;
        var y = PetriView.paper.paperToLocalPoint(0, 0).y + 20;
        PetriView.graph.addCell(new joint.shapes.pn.Place({ attrs: { '.label': { 'text': '', 'fill': '#7c68fc' },
                '.root': { 'stroke': '#7c68fc', 'stroke-width': 3 },
                '.tokens > circle': { 'fill': '#7a7e9b' }, '.alot > text': {
                    'fill': '#fe854c',
                    'font-family': 'Courier New',
                    'font-size': 20,
                    'font-weight': 'bold',
                    'ref-x': 0.5,
                    'ref-y': 0.5,
                    'y-alignment': -0.5,
                    'transform': null
                }
            }, tokens: 0,
            position: { x: x, y: y } }));
        PetriView.backupTokens = PetriView.getTokenlist(PetriView.graph.getCells());
        this.updateGraph();
    }
    addTrans() {
        var x = PetriView.paper.paperToLocalPoint(0, 0).x + 90;
        var y = PetriView.paper.paperToLocalPoint(0, 0).y + 35;
        if (PetriView.selectedCell) {
            if (PetriView.selectedCell.attributes.type == "pn.Place") {
                PetriView.selectedCell.attr({ ".root": { "stroke": "#7c68fc" } });
            }
            else {
                PetriView.selectedCell.attr({ "body": { "stroke": "#7c68fc" } });
            }
        }
        PetriView.selectedCell = new customTrans_1.customTransition({
            position: { x: x, y: y }
        });
        PetriView.graph.addCell(PetriView.selectedCell);
        document.getElementById("timeLabel").style.display = "flex";
        document.getElementById("timeInput").style.display = "flex";
        PetriView.showPopup("popup");
        this.updateGraph();
    }
    resetLayout() {
        $("#layoutPopup").css("display", "none");
        var nodeSep = Number($("#nodeSepInput").prop("value"));
        var edgeSep = Number($("#edgeSepInput").prop("value"));
        var rankSep = Number($("#rankSepInput").prop("value"));
        var orientation = $("#layoutDir").prop("value");
        var options = { dagre: dagre_1.default, graphlib: graphlib_1.default, nodeSep: nodeSep, edgeSep: edgeSep,
            rankSep: rankSep, rankDir: orientation, setVertices: true, marginX: 20, marginY: 30 };
        joint.layout.DirectedGraph.layout(PetriView.graph, options);
    }
    clearAll() {
        // Reset Zoom and empty Graph
        PetriView.paper.translate(0, 0);
        PetriView.paper.scale(1, 1, 0, 0);
        PetriView.graph.clear();
        PetriView.updateTransList();
        this.updateGraph();
        // Delete all Event-Attributes!
        $("#eventAttrsList").empty();
        PetriView.eventAttrs = [];
    }
    simulate() {
        var transitions = [];
        for (const c of PetriView.graph.getCells()) {
            if (c.attributes.type == "customTransition") {
                transitions.push(c);
            }
        }
        // shuffle transitions to randomize which one is chosen first
        transitions = transitions.map((value) => ({ value, sort: Math.random() }))
            .sort((a, b) => a.sort - b.sort)
            .map(({ value }) => value);
        function fireTransition(t, sec) {
            var inbound = PetriView.graph.getConnectedLinks(t, { inbound: true });
            var outbound = PetriView.graph.getConnectedLinks(t, { outbound: true });
            var placesBefore = inbound.map(function (link) { return link.getSourceElement(); });
            var placesAfter = outbound.map(function (link) { return link.getTargetElement(); });
            var isFirable = true;
            // shuffle Places before to ensure it is random which places get checked first
            placesBefore = placesBefore.map((value) => ({ value, sort: Math.random() }))
                .sort((a, b) => a.sort - b.sort)
                .map(({ value }) => value);
            placesBefore.forEach(function (p) {
                if (p.get('tokens') === 0) {
                    isFirable = false;
                }
            });
            if (isFirable) {
                placesBefore.forEach(function (p) {
                    // Let the execution finish before adjusting the value of tokens. So that we can loop over all transitions
                    // and call fireTransition() on the original number of tokens. --> partially leads to negative tokens --> disabled for now
                    // setTimeout(function() {
                    //     p.set('tokens', p.get('tokens') - 1);
                    // }, 0);
                    p.set('tokens', p.get('tokens') - 1);
                    var links = inbound.filter(function (l) { return l.getSourceElement() === p; });
                    links.forEach(function (l) {
                        var token = joint.V('circle', { r: 5, fill: '#feb662' }).node;
                        l.findView(PetriView.paper).sendToken(token, sec * 1000);
                    });
                });
                placesAfter.forEach(function (p) {
                    var links = outbound.filter(function (l) { return l.getTargetElement() === p; });
                    links.forEach(function (l) {
                        var token = joint.V('circle', { r: 5, fill: '#feb662' }).node;
                        l.findView(PetriView.paper).sendToken(token, sec * 1000, function () {
                            p.set('tokens', p.get('tokens') + 1);
                        });
                    });
                });
            }
        }
        // if (Math.random() < 0.7)
        transitions.forEach(function (t) {
            fireTransition(t, 1);
        });
        this.simulationId = setInterval(function () {
            transitions.forEach(function (t) {
                fireTransition(t, 1);
            });
        }, 2000);
    }
    stopSimulation() {
        clearInterval(this.simulationId);
    }
    lockModel() {
        if (document.querySelector('#lock').textContent == " Lock") {
            document.querySelector('#lock').innerHTML = '<i class="fa fa-lock"></i>' + " Unlock";
            PetriView.paper.setInteractivity(function () { return false; });
            jQuery('.joint-element').css("cursor", "pointer");
            jQuery('.marker-arrowheads').css("cursor", "pointer");
            jQuery('.marker-vertices').css("cursor", "pointer");
            jQuery('.joint-link.joint-theme-dark .connection-wrap').css("cursor", "pointer");
        }
        else {
            document.querySelector('#lock').innerHTML = '<i class="fa fa-unlock"></i>' + " Lock";
            PetriView.paper.setInteractivity(function () { return true; });
        }
    }
    resetSim() {
        PetriView.paper.translate(0, 0);
        PetriView.paper.scale(1, 1, 0, 0);
        var i = 0;
        PetriView.graph.getCells().forEach(function (c) {
            if (c.attributes.type == "pn.Place") {
                c.set('tokens', PetriView.backupTokens[i]);
                i += 1;
            }
        });
    }
    static saveGraph() {
        document.getElementById("savePopup").style.display = "none";
        const fileName = document.getElementById("graphNameInput").value;
        const jsonstring = JSON.stringify(PetriView.graph.toJSON());
        localStorage.setItem(fileName, jsonstring);
        // Check for links existing with the same fileName and overwrite them
        if ($("a").filter(function () { return $(this).text() == fileName; }).length == 0) {
            var newLink = document.createElement("a");
            newLink.textContent = fileName;
            newLink.addEventListener("click", (e) => PetriView.unJSONify(fileName));
            document.getElementById("dropdown-content").appendChild(newLink);
        }
        // Reset the value of the graphNameInput-field and disable button again
        document.getElementById("graphNameInput").value = "";
        document.getElementById("saveGraphAs").disabled = true;
    }
    static parsePNML(xmlPnml) {
        var placePos = new Set();
        var transPos = new Set();
        for (let childId in xmlPnml.childNodes) {
            let child = xmlPnml.childNodes[childId];
            if (child.tagName == "net") {
                for (let child2Id in child.childNodes) {
                    let child2 = child.childNodes[child2Id];
                    if (child2.tagName == "caseattr") {
                        PetriView.caseAttrs.push(child2.getAttribute("label"));
                    }
                }
                PetriView.parsePNML(child);
            }
            else if (child.tagName == "page") {
                PetriView.parsePNML(child);
            }
            else {
                if (child.tagName == "place") {
                    let placeId = child.getAttribute("id");
                    var placeName = "";
                    var placeTokens = 0;
                    var xPos = 20;
                    var yPos = 25;
                    for (let child2Id in child.childNodes) {
                        let child2 = child.childNodes[child2Id];
                        if (child2.tagName == "name") {
                            for (let child3Id in child2.childNodes) {
                                let child3 = child2.childNodes[child3Id];
                                if (child3.tagName == "text") {
                                    placeName = child3.textContent;
                                }
                            }
                        }
                        else if (child2.tagName == "graphics") {
                            for (let child3Id in child2.childNodes) {
                                let child3 = child2.childNodes[child3Id];
                                if (child3.tagName == "position") {
                                    xPos = parseInt(child3.getAttribute("x")) * 10;
                                    yPos = parseInt(child3.getAttribute("y")) * 10;
                                }
                            }
                        }
                        else if (child2.tagName != null && child2.tagName.toLowerCase() == "initialmarking") {
                            for (let child3Id in child2.childNodes) {
                                let child3 = child2.childNodes[child3Id];
                                if (child3.tagName == "text") {
                                    placeTokens = parseInt(child3.textContent);
                                }
                            }
                        }
                    }
                    let newPlace = new joint.shapes.pn.Place({ attrs: { '.label': { 'text': placeName, 'fill': '#7c68fc' },
                            '.root': { 'stroke': '#7c68fc', 'stroke-width': 3 },
                            '.tokens > circle': { 'fill': '#7a7e9b' }, '.alot > text': {
                                'fill': '#fe854c',
                                'font-family': 'Courier New',
                                'font-size': 20,
                                'font-weight': 'bold',
                                'ref-x': 0.5,
                                'ref-y': 0.5,
                                'y-alignment': -0.5,
                                'transform': null
                            }
                        }, tokens: placeTokens,
                        position: { x: xPos, y: yPos },
                        id: placeId });
                    PetriView.graph.addCell(newPlace);
                    placePos.add(xPos).add(yPos);
                }
                else if (child.tagName == "transition") {
                    let transId = child.getAttribute("id");
                    var transLabel = transId;
                    var xPos = 20;
                    var yPos = 25;
                    var conditions = [];
                    var eventattrs = [];
                    for (let child2Id in child.childNodes) {
                        let child2 = child.childNodes[child2Id];
                        if (child2.tagName == "name") {
                            for (let child3Id in child2.childNodes) {
                                let child3 = child2.childNodes[child3Id];
                                if (child3.tagName == "text") {
                                    transLabel = child3.textContent;
                                }
                            }
                        }
                        else if (child2.tagName == "toolspecific") {
                            if (child2.getAttribute("tool") == "ipypetrinet") {
                                var exectime = child2.getAttribute("exectime");
                                for (let child3Id in child2.childNodes) {
                                    let child3 = child2.childNodes[child3Id];
                                    if (child3.tagName == "condition") {
                                        conditions.push(child3.getAttribute("label"));
                                    }
                                    else if (child3.tagName == "eventattr") {
                                        eventattrs.push(child3.getAttribute("label"));
                                    }
                                }
                            }
                        }
                        else if (child2.tagName == "graphics") {
                            for (let child3Id in child2.childNodes) {
                                let child3 = child2.childNodes[child3Id];
                                if (child3.tagName == "position") {
                                    xPos = parseInt(child3.getAttribute("x")) * 10;
                                    yPos = parseInt(child3.getAttribute("y")) * 10;
                                }
                            }
                        }
                    }
                    let newTrans = new customTrans_1.customTransition({
                        attrs: {
                            label: {
                                text: transLabel
                            }
                        },
                        exectime: exectime,
                        eventAttrs: eventattrs,
                        position: { x: xPos, y: yPos },
                        id: transId,
                    });
                    conditions.forEach((cond) => { newTrans.addDefaultPort(cond); });
                    PetriView.graph.addCell(newTrans);
                    transPos.add(xPos).add(yPos);
                }
                else if (child.tagName == "arc") {
                    // Dictonaries only to be able to use existing PetriView.link function
                    let arcSource = { id: child.getAttribute("source") };
                    let arcTarget = { id: child.getAttribute("target") };
                    var arcProb = "1.00";
                    for (let child2Id in child.childNodes) {
                        let child2 = child.childNodes[child2Id];
                        if (child2.tagName == "name") {
                            for (let child3Id in child2.childNodes) {
                                let child3 = child2.childNodes[child3Id];
                                if (child3.tagName == "text") {
                                    arcProb = child3.textContent;
                                }
                            }
                        }
                    }
                    var newLink = PetriView.link(arcSource, arcTarget);
                    newLink.attributes.labels.pop();
                    newLink.appendLabel({
                        attrs: { text: { text: arcProb } },
                        position: { distance: 0.5, args: { keepGradient: true, ensureLegibility: true } }
                    });
                    PetriView.graph.addCell(newLink);
                }
            }
        }
        PetriView.graph.getCells().forEach((cell) => {
        });
        // Check if auto-layout should apply (note that the method is called recursive, so != 0 is crucial)
        if ((placePos.size <= 2 && placePos.size != 0) || (transPos.size <= 2 && transPos.size != 0)) {
            joint.layout.DirectedGraph.layout(PetriView.graph, { dagre: dagre_1.default, graphlib: graphlib_1.default, setVertices: true, marginX: 20, marginY: 30 });
        }
    }
    static importJSON() {
        PetriView.paper.translate(0, 0);
        PetriView.paper.scale(1, 1, 0, 0);
        PetriView.showTab("caseTab");
        PetriView.eventAttrs = [];
        PetriView.updateAttrsFrontend("caseAttrsList");
        var files = document.getElementById("fileInput").files;
        if (files.length <= 0) {
            return false;
        }
        let fileType = files[0]["name"].split(".")[1];
        var reader = new FileReader();
        reader.onload = function (e) {
            if (fileType == "pnml") {
                PetriView.graph.clear();
                PetriView.caseAttrs = [];
                let parser = new DOMParser();
                var xmlDoc = parser.parseFromString(e.target.result, "text/xml");
                let xmlPnml = xmlDoc.getElementsByTagName("pnml")[0];
                PetriView.parsePNML(xmlPnml);
                PetriView.backupTokens = PetriView.getTokenlist(PetriView.graph.getCells());
                PetriView.updateAttrsFrontend("caseAttrsList");
            }
            else {
                var jsonstring = JSON.parse(e.target.result);
                PetriView.caseAttrs = jsonstring["caseAttributes"] ? jsonstring["caseAttributes"] : [];
                PetriView.updateAttrsFrontend("caseAttrsList");
                delete jsonstring["caseAttributes"];
                PetriView.graph.fromJSON(jsonstring);
                PetriView.backupTokens = PetriView.getTokenlist(PetriView.graph.getCells());
            }
            PetriView.graph.getCells().forEach(function (c) {
                if (c.attributes.type == "customTransition") {
                    // Just to trigger PetriView.graph.on("change", ...)
                    c.attr({ "body": { "stroke": "#7c68fc" } });
                    c.attributes.eventAttrs.forEach(function (event) {
                        PetriView.eventAttrs.push(c.attributes.attrs["label"]["text"] + " -> " + event);
                    });
                }
            });
            PetriView.updateAttrsFrontend("eventAttrsList");
            document.getElementById("uploadPopup").style.display = "none";
            var fileName = files[0]["name"].split(".")[0];
            // Check for links existing with the same fileName and overwrite them
            if ($("a").filter(function () { return $(this).text() == fileName; }).length == 0) {
                var newLink = document.createElement("a");
                newLink.textContent = fileName;
                if (fileType == "pnml") {
                    localStorage.setItem(fileName, JSON.stringify(PetriView.graph));
                    newLink.addEventListener("click", (e) => PetriView.unPNMLify(fileName));
                }
                else {
                    localStorage.setItem(fileName, e.target.result);
                    newLink.addEventListener("click", (e) => PetriView.unJSONify(fileName));
                }
                document.getElementById("dropdown-content").appendChild(newLink);
            }
        };
        reader.readAsText(files.item(0));
    }
    downloadPNML() {
        var pnmlString = '<?xml version="1.0" encoding="ISO-8859-1"?>\n\
                      <pnml>\
                        <net id="net" type="https://www.pnml.org">';
        PetriView.caseAttrs.forEach((caseAttr) => { pnmlString += ` <caseattr label='${caseAttr.replace("<", "&lt;").replace(">", "&gt;")}'/>`; });
        pnmlString += '<name>\
                     <text>PetriNet</text>\
                   </name>\
                   <page id="Page0">\
                     <name>\
                       <text/>\
                     </name>';
        PetriView.graph.getCells().forEach(function (cell) {
            if (cell.attributes.type == "pn.Place") {
                var id = cell.attributes.id;
                var name = cell.attributes.attrs[".label"]["text"];
                var tokens = cell.attributes.tokens;
                var width = cell.attributes.size["width"];
                var height = cell.attributes.size["height"];
                var x = cell.attributes.position["x"] / 10;
                var y = cell.attributes.position["y"] / 10;
                pnmlString += `<place id="${id}">\
                        <name>\
                          <text>${name}</text>\
                        </name>\
                        <toolspecific tool="ipypetrinet"/>\
                        <graphics>\
                          <position x="${x}" y="${y}"/>\
                          <dimension x="${width}" y="${height}"/>\
                        </graphics>\
                        <initialMarking>\
                          <text>${tokens}</text>\
                        </initialMarking>\
                      </place>`;
            }
            else if (cell.attributes.type == "customTransition") {
                var id = cell.id;
                var name = cell.attributes.attrs["label"]["text"];
                var width = cell.attributes.size["width"];
                var height = cell.attributes.size["height"];
                var x = cell.attributes.position["x"] / 10;
                var y = cell.attributes.position["y"] / 10;
                var exectime = cell.attributes.exectime;
                var eventattrs = cell.attributes.eventAttrs;
                var conditions = [];
                cell.attributes.ports.items.forEach(function (item) {
                    conditions.push(item["attrs"]["portLabel"]["text"].replace("<", "&lt;").replace(">", "&gt;"));
                });
                pnmlString += `<transition id="${id}">\
                        <name>\
                          <text>${name}</text>\
                        </name>\
                        <toolspecific tool="ipypetrinet" exectime="${exectime}">`;
                conditions.forEach((cond) => { pnmlString += ` <condition label='${cond}'/>`; });
                eventattrs.forEach((eventAttr) => { pnmlString += ` <eventattr label='${eventAttr.replace("<", "&lt;").replace(">", "&gt;")}'/>`; });
                pnmlString += `</toolspecific><graphics>\
                        <position x="${x}" y="${y}"/>\
                        <dimension x="${width}" y="${height}"/>\
                        <fill color="#9586fd"/>\
                      </graphics>\
                      </transition>`;
            }
        });
        PetriView.graph.getLinks().forEach(function (link) {
            var id = link.attributes.id;
            var prob = link.attributes.labels[0]["attrs"]["text"]["text"];
            var source = link.attributes.source.id;
            var target = link.attributes.target.id;
            pnmlString += `<arc id="${id}" source="${source}" target="${target}">\
                        <name>\
                          <text>${prob}</text>\
                        </name>\
                        <toolspecific tool="ipypetrinet"/>\
                        <arctype>\
                          <text>normal</text>\
                        </arctype>\
                      </arc>`;
        });
        pnmlString += `</page><finalmarkings><marking></marking></finalmarkings></net></pnml>`;
        let blob = new Blob([pnmlString], { type: 'data:.pnml;charset=utf-8' });
        let url = URL.createObjectURL(blob);
        let a = document.createElement("a");
        a.setAttribute('download', 'PetriNet.pnml');
        a.setAttribute('href', url);
        a.setAttribute('target', '_blank');
        a.click();
        document.getElementById("DownloadPopup").style.display = "none";
    }
    downloadJSON() {
        var jsonstring = JSON.stringify(PetriView.graph.toJSON());
        if (jsonstring == null) {
            console.log("There is no JSON file to be saved.");
        }
        else {
            // Add Case-Attributes to String if not empty
            if (PetriView.caseAttrs) {
                var caseString = "";
                caseString += ',"caseAttributes":[';
                var i = 0;
                PetriView.caseAttrs.forEach(function (attr) {
                    caseString += '"' + attr + '"';
                    if (i < PetriView.caseAttrs.length - 1) {
                        caseString += ",";
                    }
                    else {
                        caseString += "]";
                    }
                });
                jsonstring = jsonstring.substring(0, jsonstring.length - 1) + caseString + "}";
            }
            let blob = new Blob([jsonstring], { type: 'data:text/json;charset=utf-8' });
            let url = URL.createObjectURL(blob);
            let a = document.createElement("a");
            a.setAttribute('download', 'graph.json');
            a.setAttribute('href', url);
            a.setAttribute('target', '_blank');
            a.click();
        }
        document.getElementById("DownloadPopup").style.display = "none";
    }
    static unPNMLify(fileName) {
        PetriView.graph.clear();
        const pnmlString = localStorage.getItem(fileName);
        PetriView.graph.fromJSON(JSON.parse(pnmlString));
        // let parser = new DOMParser();
        // var xmlDoc = parser.parseFromString(pnmlString, "text/xml");
        // let xmlPnml = xmlDoc.getElementsByTagName("pnml")[0];
        // PetriView.parsePNML(xmlPnml);
    }
    static unJSONify(fileName) {
        const jsonstring = localStorage.getItem(fileName);
        PetriView.graph.fromJSON(JSON.parse(jsonstring));
    }
    saveIMG() {
        // make sure the link-tools are disabled for a clean SVG
        $(".marker-arrowhead").css("display", "none");
        $(".tool-remove").css("display", "none");
        $(".tool-options").css("display", "none");
        $(".marker-vertices").css("display", "none");
        let svg = document.querySelector('svg');
        if (svg == null) {
            console.log("There is no SVG to be saved.");
        }
        else {
            let data = (new XMLSerializer()).serializeToString(svg);
            let blob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
            let url = URL.createObjectURL(blob);
            let a = document.createElement('a');
            a.setAttribute('download', 'image.svg');
            a.setAttribute('href', url);
            a.setAttribute('target', '_blank');
            a.click();
        }
        // reenable certain options again
        $(".marker-arrowhead").css("display", "flex");
        $(".tool-remove").css("display", "flex");
        $(".marker-vertices").css("display", "flex");
    }
    enableLabelButton(input) {
        if (PetriView.selectedCell.attributes.type == "customTransition" && PetriView.selectedCell.attributes.attrs["label"]["text"] == "") {
            $("#changelabel").prop("disabled", !(document.getElementById("input").value));
        }
    }
    enableSaveButton(input) {
        $("#saveGraphAs").prop("disabled", !(document.getElementById("graphNameInput").value));
    }
    static saveChanges() {
        document.getElementById("popup").style.display = "none";
        var newLabel = document.getElementById("input").value;
        if (PetriView.selectedCell.attributes.type == "customTransition") {
            PetriView.selectedCell.attributes.exectime = document.getElementById("timeInput").value;
        }
        if (newLabel != "") {
            (PetriView.selectedCell.attributes.type == "pn.Place") ? PetriView.selectedCell.attr('.label/text', newLabel)
                : PetriView.selectedCell.attr('label/text', newLabel);
            document.getElementById("input").value = "";
            $("#changelabel").prop("disabled", true);
        }
    }
    static saveConditions() {
        document.getElementById("condPopup").style.display = "none";
        var input = document.getElementById("conditionInput");
        var conds = input.value.split(",");
        conds.forEach(function (c) {
            PetriView.selectedCell.addDefaultPort(c.trim());
        });
        input.value = "";
        PetriView.selectedCell = null;
    }
    addAttributes() {
        var attr = $("#attrName").val();
        var checked = $("input[name='dist']:checked").prop("id");
        var isEvtTab = document.getElementsByClassName("tablinks active")[0].id == "eventTab";
        if (isEvtTab) {
            var trans = document.getElementsByClassName("transListEl active")[0].getElementsByTagName("li")[0].innerHTML;
        }
        if (checked == "staticAttr") {
            var staticVal = $("#staticVal").val();
            var p = $("#staticProbs").val();
            (staticVal == "") ? staticVal = [] : [staticVal];
            if (p == "") {
                var str = `${attr}: np.random.choice([${staticVal}])`;
            }
            else {
                var str = `${attr}: np.random.choice([${staticVal}], p=[${p}])`;
            }
        }
        else if (checked == "normalDist") {
            var mue = $("#mue").val();
            var sigma = $("#sigma").val();
            (mue == "") ? mue = "1" : mue;
            (sigma == "") ? sigma = "0.5" : sigma;
            var str = `${attr}: np.random.normal(loc=${mue}, scale=${sigma})`;
        }
        else if (checked == "bernDist") {
            var n = $("#n").val();
            var p = $("#p").val();
            (n == "") ? n = "1" : n;
            (p == "") ? p = "0.5" : p;
            var str = `${attr}: np.random.binomial(n=${n}, p=${p})`;
        }
        else if (checked == "gammaDist") {
            var k = $("#k").val();
            var theta = $("#theta").val();
            (k == "") ? k = "9" : k;
            (theta == "") ? theta = "0.5" : theta;
            var str = `${attr}: np.random.gamma(shape=${k}, scale=${theta})`;
        }
        else if (checked == "expoDist") {
            var beta = $("#beta").val();
            (beta == "") ? beta = "3" : beta;
            var str = `${attr}: np.random.exponential(scale=${beta})`;
        }
        if (isEvtTab) {
            PetriView.eventAttrs.push(trans + " -> " + str);
            PetriView.updateGraphEventAttrs();
            PetriView.updateAttrsFrontend("eventAttrsList");
        }
        else {
            PetriView.caseAttrs.push(str);
            PetriView.updateAttrsFrontend("caseAttrsList");
        }
        this.updateGraph();
        PetriView.resetDistForms();
    }
    toggleFields(id) {
        $('#staticVal, #staticProbs, #mue, #sigma, #n, #p, #k, #theta, #beta').css("display", "none");
        this.enableAttributeButtons();
        if (id == "staticAttr") {
            $("#staticVal").css("display", "flex");
            $("#staticProbs").css("display", "flex");
        }
        else if (id == "normalDist") {
            $("#mue").css("display", "flex");
            $("#sigma").css("display", "flex");
        }
        else if (id == "bernDist") {
            $("#n").css("display", "flex");
            $("#p").css("display", "flex");
        }
        else if (id == "gammaDist") {
            $("#k").css("display", "flex");
            $("#theta").css("display", "flex");
        }
        else if (id == "expoDist") {
            $("#beta").css("display", "flex");
        }
    }
    enableAttributeButtons() {
        var radioChecked = $("input[name='dist']:checked").prop("id");
        // Do if EventTab is active
        if ($("#eventTab").prop("className") == "tablinks active") {
            var checkTrans = document.getElementsByClassName("transListEl active").length > 0;
            if (checkTrans && radioChecked && $("#attrName").prop("value")) {
                $("#addEventAttributes").prop("disabled", false);
            }
            else {
                $("#addEventAttributes").prop("disabled", true);
            }
            // Do if CaseTab is active
        }
        else {
            if (radioChecked && $("#attrName").prop("value")) {
                $("#addCaseAttributes").prop("disabled", false);
            }
            else {
                $("#addCaseAttributes").prop("disabled", true);
            }
        }
    }
    static updateAttrsFrontend(id) {
        var list = [];
        $(`#${id}`).empty();
        (id == "caseAttrsList") ? list = PetriView.caseAttrs : list = PetriView.eventAttrs;
        list.forEach(function (item) {
            var listEl = document.createElement("div");
            listEl.style.display = "flex";
            let li = document.createElement('li');
            li.innerHTML = item;
            var dismissButton = document.createElement("button");
            dismissButton.className = "dismissbutton";
            dismissButton.innerHTML = "<i class='fa fa-times-circle'></i>";
            dismissButton.addEventListener("click", (e) => PetriView.deleteListEl(id, item));
            listEl.append(dismissButton, li);
            document.getElementById(id).appendChild(listEl);
        });
    }
    static deleteListEl(id, content) {
        if (id == "caseAttrsList") {
            PetriView.caseAttrs.forEach(function (el, index) {
                if (content == el) {
                    PetriView.caseAttrs.splice(index, 1);
                }
            });
        }
        else {
            PetriView.eventAttrs.forEach(function (el, index) {
                if (content == el) {
                    PetriView.eventAttrs.splice(index, 1);
                }
            });
            PetriView.updateGraphEventAttrs();
        }
        PetriView.updateAttrsFrontend(id);
    }
    static updateGraphEventAttrs() {
        PetriView.graph.getCells().forEach(function (c) {
            if (c.attributes.type == "customTransition") {
                c.attributes.eventAttrs = [];
                PetriView.eventAttrs.forEach(function (item) {
                    var event = item.replace(": ", "=").split(" -> ");
                    if (event[0] == c.attributes.attrs["label"]["text"]) {
                        c.attributes.eventAttrs.push(event[1]);
                    }
                });
            }
        });
        PetriView.graph.set('cellNamespace', joint.shapes);
    }
    static resetDistForms() {
        document.getElementById("addCaseAttributes").disabled = true;
        document.getElementById("addEventAttributes").disabled = true;
        $("#attrName").prop("value", "");
        $("input[name=dist]").prop("checked", false);
        $("#staticVal, #staticProbs, #mue, #sigma, #n, #p, #k, #theta, #beta").css("display", "none");
        $("#staticVal, #staticProbs, #mue, #sigma, #n, #p, #k, #theta, #beta").prop("value", "");
    }
    static showTab(id) {
        PetriView.resetDistForms();
        $("#caseTab, #eventTab").prop("className", "tablinks");
        $("#caseTabContent, #eventTabContent").css("display", "none");
        if (id == "eventTab") {
            PetriView.updateTransList();
            $("#eventTabContent").css("display", "block");
            $("#eventTab").prop("className", "tablinks active");
        }
        else if (id == "caseTab") {
            $("#caseTabContent").css("display", "block");
            $("#caseTab").prop("className", "tablinks active");
        }
    }
    static updateTransList() {
        $("#transList").empty();
        var transitions = [];
        PetriView.graph.getCells().forEach(function (c) {
            if (c.attributes.type == "customTransition") {
                transitions.push(c.attributes.attrs["label"]["text"]);
            }
        });
        transitions.forEach(function (trans) {
            var listEl = document.createElement("div");
            listEl.className = "transListEl";
            listEl.style.display = "flex";
            listEl.style.cursor = "pointer";
            listEl.addEventListener("click", (e) => PetriView.selectTrans(listEl));
            let li = document.createElement('li');
            li.innerHTML = trans;
            var addEventAttrButton = document.createElement("button");
            addEventAttrButton.className = "dismissbutton";
            addEventAttrButton.innerHTML = "<i class='fa fa-plus-circle'></i>";
            listEl.append(addEventAttrButton, li);
            document.getElementById("transList").appendChild(listEl);
        });
        if (document.getElementById("transList").innerHTML.trim() == "") {
            document.getElementById("eventHeader").textContent = "Currently there are no transitions available.";
        }
        else {
            document.getElementById("eventHeader").textContent = "Select the transition to be linked:";
        }
    }
    static selectTrans(div) {
        var activeElements = Array.from(document.getElementsByClassName("transListEl active"));
        activeElements.forEach((el) => {
            el.style.backgroundColor = "white";
            el.className = "transListEl";
        });
        div.style.backgroundColor = "#DCDCDC";
        div.className = "transListEl active";
        // check if button should be enabled
        var checkTrans = document.getElementsByClassName("transListEl active").length > 0;
        var checkRadio = $("input[name='dist']:checked").prop("id");
        if (checkTrans && $("#attrName").val() != "" && checkRadio) {
            $("#addEventAttributes").prop("disabled", false);
        }
        else {
            $("#addEventAttributes").prop("disabled", true);
        }
    }
    static changeProb() {
        document.getElementById("linkPopup").style.display = "none";
        var inputEl = document.getElementById("linkInput");
        PetriView.selectedCell.attributes.labels.pop();
        PetriView.selectedCell.appendLabel({
            attrs: { text: { text: inputEl.value } },
            position: { distance: 0.5, args: { keepGradient: true, ensureLegibility: true } }
        });
    }
}
exports.PetriView = PetriView;
PetriView.caseAttrs = [];
PetriView.eventAttrs = [];
//# sourceMappingURL=widget.js.map

/***/ }),

/***/ "./node_modules/css-loader/dist/cjs.js!./css/widget.css":
/*!**************************************************************!*\
  !*** ./node_modules/css-loader/dist/cjs.js!./css/widget.css ***!
  \**************************************************************/
/***/ ((module, exports, __webpack_require__) => {

// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
exports.push([module.id, "/*\nA complete list of SVG properties that can be set through CSS is here:\nhttp://www.w3.org/TR/SVG/styling.html\n\nImportant note: Presentation attributes have a lower precedence over CSS style rules.\n*/\n\n/* Own CSS-Styles by me */\n/* Style everything button related */\n.button {\n  border: none;\n  color: white;\n  padding: 8px 18px;\n  text-align: center;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 14px;\n  margin: 2px 1px;\n  cursor: pointer;\n  background-color: unset;\n}\n.button1 {background-color: #7c68fc;}\n.button2 {background-color: #303030;}\n\n/* On click button styling */\n.button:active {\n  position: relative;\n  top: 1px;\n}\n\n/* Darker background on mouse-over */\n.button1:hover { background-color: #6656d1; }\n.button2:hover { background-color: #fe854f; } /* Alternativ darkorange? */\n\n.button:disabled {\n  opacity: 0.4;\n}\n\n.dismissbutton {\n  border: none;\n  font-size: 20px;\n  color: #7c68fc;\n  background-color: inherit;\n  cursor: pointer;\n}\n\n.tab button {\n  background-color: whitesmoke;\n  float: left;\n  border: 1px solid black;\n  color: black;\n  outline: none;\n  cursor: pointer;\n  margin-right: 2px;\n  margin-bottom: 10px;\n}\n\n.tab button:hover { background-color: darkgray; }\n.tab button.active { background-color: darkgray; }\n\n/* Hide bullet points in list */\nul, li {\n  align-items: center;\n  list-style-type: none;\n  padding: 0;\n  padding-top: 2px;\n}\n\n/* Style input field */\ninput {\n  padding: 15px;\n  width: 100%;\n  margin: 8px 0;\n  box-sizing: border-box;\n  box-shadow: 0 0 15px 4px rgba(0,0,0,0.06);\n}\n\ninput:focus {\n  outline: none;\n  border: 2px solid #555;\n}\n\ninput[type=radio],\ninput.radio {\n  padding: 0px;\n  margin: 4px;\n  /* clear: none; */\n  /* box-sizing: auto; */\n  width: auto;\n}\n\n.uploadLabel {\n  padding: 15px;\n  background-color: whitesmoke;\n  border: 1px solid gray;\n  color: black;\n}\n\n.uploadLabel:hover {\n  border: 1px solid black;\n  cursor: pointer;\n}\n\n/* CSS for PopUp-Form */\n.popup {\n  display: none;       /* Hidden by default */\n  position: absolute;  /* Center in parental div */\n  z-index: 10;         /* Sit on top */\n  justify-content: center; /* Center childs */\n  align-items: center;     /* Center childs */\n  left: 0;\n  top: 0;\n  width: 100%;         /* Full width */\n  height: 100%;        /* Full height */\n  overflow: auto;      /* Enable scroll if needed */\n  background-color: rgb(0,0,0);       /* Fallback color */\n  background-color: rgba(0,0,0,0.4);  /* Black w/ opacity */\n}\n\n/* CSS for PopUp-Content */\n.popup-content {\n  background-color: #fefefe;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: 25px;\n  border: 2px solid #888;\n  border-radius: 4px;\n  width: 25%;\n}\n\n.attributes {\n  width: 50%;\n}\n\n/* The container <div> - needed to position the dropdown content */\n.dropdown {\n  position: relative;\n  display: inline-block;\n}\n\n/* Dropdown Content (Hidden by Default) */\n.dropdown-content {\n  display: none;\n  position: absolute;\n  background-color: #f1f1f1;\n  min-width: 160px;\n  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n  z-index: 1;\n}\n\n/* Links inside the dropdown */\n.dropdown-content a {\n  color: black;\n  padding: 12px 16px;\n  text-decoration: none;\n  display: block;\n  cursor: pointer;\n}\n\n/* Change color of dropdown links on hover */\n.dropdown-content a:hover {background-color: #ddd;}\n.dropdown-content a:active {    \n  position: relative;\n  top: 1px;\n}\n\n/* Show the dropdown menu on hover */\n.dropdown:hover .dropdown-content {display: block;}\n\n/* SLIDER */\n.slider {\n  -webkit-appearance: none;\n  width: 100%;\n  height: 5px;\n  padding: 0px;\n  border-radius: 3px;\n  background: #d3d3d3;\n  outline: none;\n  opacity: 0.7;\n  -webkit-transition: .2s;\n  transition: opacity .2s;\n}\n\n.slider:hover {\n  opacity: 1;\n}\n\n.slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 15px;\n  height: 15px;\n  border-radius: 50%;\n  background: #7c68fc;\n  cursor: pointer;\n}\n\n.slider::-moz-range-thumb {\n  width: 15px;\n  height: 15px;\n  border-radius: 50%;\n  background: #7c68fc;\n  cursor: pointer;\n}\n\n/* CUSTOM SELECT */\n/* A reset of styles, including removing the default dropdown arrow */\nselect {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  border-radius: 3px;\n  border-color: #d3d3d3;\n  cursor: pointer;\n  line-height: 1.5;\n  padding-left: 5px;\n  width: 100%;\n  margin-bottom: 5px;\n}\n\n.select {\n  position: relative;\n  width: 100%;\n  margin-bottom: 5px;\n}\n\n.select::before {\n  color: #0000;\n  font-size: 20px;\n  pointer-events: none;\n  position: absolute;\n  right: 15px;\n  top: 10px;\n}\n\n/* Style the arrow inside the select element: */\n.select::after {\n  position: absolute;\n  content: \"\";\n  top: 9px;\n  right: 10px;\n  border: 6px solid transparent;\n  border-color: #000000 transparent transparent transparent;\n}\n\n/* Style the paper where the graph is rendered on */\n#paper {\n  position: relative;\n  background-color: whitesmoke;\n  border: 2px solid grey;\n  resize: vertical;\n  width: auto;\n  height: 400px;\n  overflow: hidden;\n  display: flex;\n}\n\n/* THIS WAS ALREADY GIVEN (exeption: transform: scale() was added in some places by myself) */\n/* .viewport is a <g> node wrapping all diagram elements in the paper */\n.joint-viewport {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.joint-paper > svg,\n.joint-paper-background {\n  transform: scale(0.98);\n  max-width: 100%;\n  max-height: 100%;\n}\n.joint-paper-grid {\n  position: absolute;\n  transform: scale(0.98);\n  max-width: 100%;\n  max-height: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n/*\n1. IE can't handle paths without the `d` attribute for bounding box calculation\n2. IE can't even handle 'd' attribute as a css selector (e.g path[d]) so the following rule will\n break the links rendering.\n\npath:not([d]) {\n  display: none;\n}\n\n*/\n\n\n/* magnet is an element that can be either source or a target of a link */\n[magnet=true]:not(.joint-element) {\n cursor: crosshair;\n}\n[magnet=true]:not(.joint-element):hover {\n opacity: .7;\n}\n\n/*\n\nElements have CSS classes named by their types. E.g. type: basic.Rect has a CSS class \"element basic Rect\".\nThis makes it possible to easilly style elements in CSS and have generic CSS rules applying to\nthe whole group of elements. Each plugin can provide its own stylesheet.\n\n*/\n\n.joint-element {\n /* Give the user a hint that he can drag&drop the element. */\n cursor: move;\n}\n\n.joint-element * {\n user-drag: none;\n}\n\n.joint-element .scalable * {\n /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */\n vector-effect: non-scaling-stroke;\n}\n/*\n\nconnection-wrap is a <path> element of the joint.dia.Link that follows the .connection <path> of that link.\nIn other words, the `d` attribute of the .connection-wrap contains the same data as the `d` attribute of the\n.connection <path>. The advantage of using .connection-wrap is to be able to catch pointer events\nin the neighborhood of the .connection <path>. This is especially handy if the .connection <path> is\nvery thin.\n\n*/\n\n.marker-source,\n.marker-target {\n /* This makes the arrowheads point to the border of objects even though the transform: scale() is applied on them. */\n vector-effect: non-scaling-stroke;\n}\n\n/* Paper */\n.joint-paper {\n  position: relative;\n}\n/* Paper */\n\n/*  Highlighting  */\n.joint-highlight-opacity {\n  opacity: 0.3;\n}\n/*  Highlighting  */\n\n/*\n\nVertex markers are `<circle>` elements that appear at connection vertex positions.\n\n*/\n\n.joint-link .connection-wrap,\n.joint-link .connection {\n fill: none;\n}\n\n/* <g> element wrapping .marker-vertex-group. */\n.marker-vertices {\n opacity: 0;\n cursor: move;\n}\n.marker-arrowheads {\n opacity: 0;\n cursor: move;\n cursor: -webkit-grab;\n cursor: -moz-grab;\n/*   display: none;   */   /* setting `display: none` on .marker-arrowheads effectivelly switches of links reconnecting */\n}\n.link-tools {\n opacity: 0;\n cursor: pointer;\n}\n.link-tools .tool-options {\n display: none;       /* by default, we don't display link options tool */\n}\n.joint-link:hover .marker-vertices,\n.joint-link:hover .marker-arrowheads,\n.joint-link:hover .link-tools {\n opacity: 1;\n}\n\n/* <circle> element used to remove a vertex */\n.marker-vertex-remove {\n cursor: pointer;\n opacity: .1;\n}\n\n.marker-vertex-group:hover .marker-vertex-remove {\n opacity: 1;\n}\n\n.marker-vertex-remove-area {\n opacity: .1;\n cursor: pointer;\n}\n.marker-vertex-group:hover .marker-vertex-remove-area {\n opacity: 1;\n}\n\n/*\nExample of custom changes (in pure CSS only!):\n\nDo not show marker vertices at all:  .marker-vertices { display: none; }\nDo not allow adding new vertices: .connection-wrap { pointer-events: none; }\n*/\n\n/* foreignObject inside the elements (i.e joint.shapes.basic.TextBlock) */\n.joint-element .fobj {\n  overflow: hidden;\n}\n.joint-element .fobj body {\n  background-color: transparent;\n  margin: 0px;\n  position: static;\n}\n.joint-element .fobj div {\n  text-align: center;\n  vertical-align: middle;\n  display: table-cell;\n  padding: 0px 5px 0px 5px;\n}\n\n/* Paper */\n.joint-paper.joint-theme-dark {\n  background-color: #18191b;\n}\n/* Paper */\n\n/*  Links  */\n.joint-link.joint-theme-dark .connection-wrap {\n  stroke: #8F8FF3;\n  stroke-width: 15;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  cursor: move;\n}\n.joint-link.joint-theme-dark .connection-wrap:hover {\n  opacity: .4;\n  stroke-opacity: .4;\n}\n.joint-link.joint-theme-dark .connection {\n  stroke-linejoin: round;\n}\n.joint-link.joint-theme-dark .link-tools .tool-remove circle {\n  fill: #F33636;\n}\n.joint-link.joint-theme-dark .link-tools .tool-remove path {\n  fill: white;\n}\n.joint-link.joint-theme-dark .link-tools [event=\"link:options\"] circle {\n  fill: green;\n}\n/* <circle> element inside .marker-vertex-group <g> element */\n.joint-link.joint-theme-dark .marker-vertex {\n  fill: #5652DB;\n}\n.joint-link.joint-theme-dark .marker-vertex:hover {\n  fill: #8E8CE1;\n  stroke: none;\n}\n.joint-link.joint-theme-dark .marker-arrowhead {\n  fill: #5652DB;\n}\n.joint-link.joint-theme-dark .marker-arrowhead:hover {\n  fill: #8E8CE1;\n  stroke: none;\n}\n/* <circle> element used to remove a vertex */\n.joint-link.joint-theme-dark .marker-vertex-remove-area {\n  fill: green;\n  stroke: darkgreen;\n}\n.joint-link.joint-theme-dark .marker-vertex-remove {\n  fill: white;\n  stroke: white;\n}\n/*  Links  */\n/* Paper */\n.joint-paper.joint-theme-default {\n  background-color: #FFFFFF;\n}\n/* Paper */\n\n/*  Links  */\n.joint-link.joint-theme-default .connection-wrap {\n  stroke: #000000;\n  stroke-width: 15;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  cursor: move;\n}\n.joint-link.joint-theme-default .connection-wrap:hover {\n  opacity: .4;\n  stroke-opacity: .4;\n}\n.joint-link.joint-theme-default .connection {\n  stroke-linejoin: round;\n}\n.joint-link.joint-theme-default .link-tools .tool-remove circle {\n  fill: #FF0000;\n}\n.joint-link.joint-theme-default .link-tools .tool-remove path {\n  fill: #FFFFFF;\n}\n\n/* <circle> element inside .marker-vertex-group <g> element */\n.joint-link.joint-theme-default .marker-vertex {\n  fill: #1ABC9C;\n}\n.joint-link.joint-theme-default .marker-vertex:hover {\n  fill: #34495E;\n  stroke: none;\n}\n\n.joint-link.joint-theme-default .marker-arrowhead {\n  fill: #1ABC9C;\n}\n.joint-link.joint-theme-default .marker-arrowhead:hover {\n  fill: #F39C12;\n  stroke: none;\n}\n\n/* <circle> element used to remove a vertex */\n.joint-link.joint-theme-default .marker-vertex-remove {\n  fill: #FFFFFF;\n}\n/*  Links  */\n\n@font-face {\n  font-family: 'lato-light';\n  src: url(data:application/font-woff;charset=utf-8;base64, ) format('woff');\n  font-weight: normal;\n  font-style: normal;\n}\n\n/*  Links  */\n.joint-link.joint-theme-material .connection-wrap {\n  stroke: #000000;\n  stroke-width: 15;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  cursor: move;\n}\n.joint-link.joint-theme-material .connection-wrap:hover {\n  opacity: .4;\n  stroke-opacity: .4;\n}\n.joint-link.joint-theme-material .connection {\n  stroke-linejoin: round;\n}\n.joint-link.joint-theme-material .link-tools .tool-remove circle {\n  fill: #C64242;\n}\n.joint-link.joint-theme-material .link-tools .tool-remove path {\n  fill: #FFFFFF;\n}\n\n/* <circle> element inside .marker-vertex-group <g> element */\n.joint-link.joint-theme-material .marker-vertex {\n  fill: #d0d8e8;\n}\n.joint-link.joint-theme-material .marker-vertex:hover {\n  fill: #5fa9ee;\n  stroke: none;\n}\n\n.joint-link.joint-theme-material .marker-arrowhead {\n  fill: #d0d8e8;\n}\n.joint-link.joint-theme-material .marker-arrowhead:hover {\n  fill: #5fa9ee;\n  stroke: none;\n}\n\n/* <circle> element used to remove a vertex */\n.joint-link.joint-theme-material .marker-vertex-remove-area {\n  fill: #5fa9ee;\n}\n.joint-link.joint-theme-material .marker-vertex-remove {\n  fill: white;\n}\n/*  Links  */\n\n/*  Links  */\n.joint-link.joint-theme-modern .connection-wrap {\n  stroke: #000000;\n  stroke-width: 15;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  cursor: move;\n}\n.joint-link.joint-theme-modern .connection-wrap:hover {\n  opacity: .4;\n  stroke-opacity: .4;\n}\n.joint-link.joint-theme-modern .connection {\n  stroke-linejoin: round;\n}\n.joint-link.joint-theme-modern .link-tools .tool-remove circle {\n  fill: #FF0000;\n}\n.joint-link.joint-theme-modern .link-tools .tool-remove path {\n  fill: #FFFFFF;\n}\n\n/* <circle> element inside .marker-vertex-group <g> element */\n.joint-link.joint-theme-modern .marker-vertex {\n  fill: #1ABC9C;\n}\n.joint-link.joint-theme-modern .marker-vertex:hover {\n  fill: #34495E;\n  stroke: none;\n}\n\n.joint-link.joint-theme-modern .marker-arrowhead {\n  fill: #1ABC9C;\n}\n.joint-link.joint-theme-modern .marker-arrowhead:hover {\n  fill: #F39C12;\n  stroke: none;\n}\n\n/* <circle> element used to remove a vertex */\n.joint-link.joint-theme-modern .marker-vertex-remove {\n  fill: white;\n}\n/*  Links  */\n", ""]);
// Exports
module.exports = exports;


/***/ }),

/***/ "./css/widget.css":
/*!************************!*\
  !*** ./css/widget.css ***!
  \************************/
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

var api = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
            var content = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./widget.css */ "./node_modules/css-loader/dist/cjs.js!./css/widget.css");

            content = content.__esModule ? content.default : content;

            if (typeof content === 'string') {
              content = [[module.id, content, '']];
            }

var options = {};

options.insert = "head";
options.singleton = false;

var update = api(content, options);



module.exports = content.locals || {};

/***/ }),

/***/ "./package.json":
/*!**********************!*\
  !*** ./package.json ***!
  \**********************/
/***/ ((module) => {

"use strict";
module.exports = JSON.parse('{"name":"ipypetrinet","version":"1.2.0","description":"A custom petrinet widget.","keywords":["jupyter","jupyterlab","jupyterlab-extension","widgets"],"files":["lib/**/*.js","dist/*.js","css/*.css"],"homepage":"https://github.com/LordHeImchen/ipypetrinet","bugs":{"url":"https://github.com/LordHeImchen/ipypetrinet/issues"},"license":"BSD-3-Clause","author":{"name":"Jakob Bucksch","email":"jakob.bucksch@dfki.de"},"main":"lib/index.js","types":"./lib/index.d.ts","repository":{"type":"git","url":"https://github.com/LordHeImchen/ipypetrinet"},"scripts":{"build":"yarn run build:lib && yarn run build:nbextension && yarn run build:labextension:dev","build:prod":"yarn run build:lib && yarn run build:nbextension && yarn run build:labextension","build:labextension":"jupyter labextension build .","build:labextension:dev":"jupyter labextension build --development True .","build:lib":"tsc","build:nbextension":"webpack","clean":"yarn run clean:lib && yarn run clean:nbextension && yarn run clean:labextension","clean:lib":"rimraf lib","clean:labextension":"rimraf ipypetrinet/labextension","clean:nbextension":"rimraf ipypetrinet/nbextension/static/index.js","lint":"eslint . --ext .ts,.tsx --fix","lint:check":"eslint . --ext .ts,.tsx","prepack":"yarn run build:lib","test":"jest","watch":"npm-run-all -p watch:*","watch:lib":"tsc -w","watch:nbextension":"webpack --watch --mode=development","watch:labextension":"jupyter labextension watch ."},"dependencies":{"@jupyter-widgets/base":"^1.1.10 || ^2.0.0 || ^3.0.0 || ^4.0.0","@types/filesystem":"^0.0.32","@types/react":"^17.0.37","fs":"^0.0.1-security","graphlib":"^2.1.8","jointjs":"^3.4.4"},"devDependencies":{"@babel/core":"^7.5.0","@babel/preset-env":"^7.5.0","@jupyterlab/builder":"^3.0.0","@phosphor/application":"^1.6.0","@phosphor/widgets":"^1.6.0","@types/dagre":"^0.7.47","@types/graphlib":"^2.1.8","@types/jest":"^26.0.0","@types/node":"^16.11.11","@types/webpack-env":"^1.13.6","@typescript-eslint/eslint-plugin":"^3.6.0","@typescript-eslint/parser":"^3.6.0","acorn":"^7.2.0","css-loader":"^3.2.0","dagre":"^0.8.5","eslint":"^7.4.0","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.4","fs-extra":"^7.0.0","identity-obj-proxy":"^3.0.0","jest":"^26.0.0","mkdirp":"^0.5.1","npm-run-all":"^4.1.3","prettier":"^2.0.5","rimraf":"^2.6.2","source-map-loader":"^1.1.3","style-loader":"^1.0.0","ts-jest":"^26.0.0","ts-loader":"^8.0.0","typescript":"~4.1.3","webpack":"^5.0.0","webpack-cli":"^4.0.0"},"jupyterlab":{"extension":"lib/plugin","outputDir":"ipypetrinet/labextension/","sharedPackages":{"@jupyter-widgets/base":{"bundled":false,"singleton":true}}}}');

/***/ })

}]);
//# sourceMappingURL=lib_widget_js.a0d8d9492615002f5afb.js.map