HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/RMourik/bassol.nl/wwwroot/CMSModules/Workflows/Controls/Scripts/ConditionNode.js
var JsPlumbConditionNode = $class({

    Extends: JsPlumbAbstractNode,

    constructor: function (readOnly, graph, definition) {
        JsPlumbAbstractNode.call(this, readOnly, graph, definition);

        this.everySideFakeAnchors = [
                                        [0.1, 0, 0, -1], 
                                        [0.3, 0, 0, -1],
                                        [0.5, 0, 0, -1],
                                        [0.7, 0, 0, -1],
                                        [0.9, 0, 0, -1]
                                    ];

        //Fake endpoint definitions are used instead of actual target point
        //You can specify better anchors and prevents changing position of selected connection
        this.fakeEndpointDefinition = {
            dynamicAnchors: this.everySideFakeAnchors,
            isSource: false,
            isTarget: true,
            reattach: true,
            endpoint: ["Blank"]
        };

        // Redefines inherited templates
        this.switchCaseSourcePointTemplate = {
            dynamicAnchors: ["RightMiddle", "LeftMiddle"],
            endpoint: ["Image", { url: this.graph.addresses["ImagesUrl"] + "/endpoint_case.png"}],
            endpointSelected: ["Image", { url: this.graph.addresses["ImagesUrl"] + "/endpoint_case_selected.png"}],
            tooltip: this.getCaseTooltip(),
            reattachHelperTooltip: graph.getReadOnlyResourceString("ReattachHelperTooltip"),
            isSource: true,
            isTarget: true,
            reattach: true,
            maxConnections: 1,
            dragOptions: { disabled: this.readOnly }
        },

        this.switchDefaultSourcePointTemplate = {
            anchor: "BottomCenter",
            endpoint: ["Image", { url: this.graph.addresses["ImagesUrl"] + "/endpoint_else.png"}],
            endpointSelected: ["Image", { url: this.graph.addresses["ImagesUrl"] + "/endpoint_case_selected.png"}],
            tooltip: graph.getReadOnlyResourceString(this.definition.TypeName + "Default", "SourcepointSwitchDefaultTooltip"),
            reattachHelperTooltip: graph.getReadOnlyResourceString("ReattachHelperTooltip"),
            isSource: true,
            isTarget: true,
            reattach: true,
            maxConnections: 1,
            dragOptions: { disabled: this.readOnly }
        },

        this.sourcePointTemplates = {
            switchDefault: this.switchDefaultSourcePointTemplate,
            switchCase: this.switchCaseSourcePointTemplate
        };

        this.targetPointTemplate = {
            anchor: "Center",
            endpoint: ["Blank"],
            isSource: false,
            isTarget: true,
            reattach: true,
            maxConnections: -1,
            fakeEndpointDefinition: this.fakeEndpointDefinition
        };

        this.defaultSourcePointDefinition = [{ Type: "switchCase" }, { Type: "switchDefault"}];
    },


    /*
    *   Returns case tooltip.
    */
    getCaseTooltip: function () {
        return this.graph.getReadOnlyResourceString(this.definition.TypeName + "Case", "SourcepointSwitchCaseTooltip");
    },


    /*
    *   Creates case row of switch node.
    */
    addConditionRow: function (sourcePoint) {
        sourcePoint.Label = this.getCleanedString(sourcePoint.Label);
        sourcePoint.HtmlID = this.getHtmlRowId(sourcePoint.ID);
        $cmsj('#' + this.htmlId + ' div.Cases').append(this.getCaseRowTemplate(sourcePoint));
        $cmsj('#' + sourcePoint.HtmlID).data('id', sourcePoint.ID);
        this.createConditionRowTooltip(sourcePoint);
    },


    /*
    *   Creates custom tooltip for condition.
    */
    createConditionRowTooltip: function (sourcePoint) {
        if (!sourcePoint.Tooltip || sourcePoint.Tooltip.length == 0) {
            return '';
        }
        var tooltipId = sourcePoint.HtmlID + 'tooltip';
        $cmsj('#' + tooltipId).remove();
        var tooltip = $cmsj('<div id="' + tooltipId + '" class="tooltip in CustomTooltip">' + sourcePoint.Tooltip + '</div>');
        this.graph.graphJQ.parents("body").append(tooltip);
        var tooltipSettings = this.getConditionTooltipSettings(tooltipId);
        $cmsj("#" + sourcePoint.HtmlID).find(".Editable").tooltip(tooltipSettings).data("tooltip").show().hide();
    },


    /* 
    *   Creates condition tooltip settings.
    */
    getConditionTooltipSettings: function (tooltipId) {
        var tooltipSettings = this.myJsPlumb.extend({}, this.graph.tooltipConfiguration);
        tooltipSettings.tip = '#' + tooltipId;
        if (isRTL) {
            tooltipSettings.position = "top right";
        } else {                        
            tooltipSettings.position = "top left";
        }
        tooltipSettings.effect = "condition";
        return tooltipSettings;
    },


    /*
    *   Returns new case row HTML representation.
    */
    getCaseRowTemplate: function (sourcePoint) {
        if (!sourcePoint.Label) {
            sourcePoint.Label = this.defaultCaseContent;
        }
        return '<div id="' + sourcePoint.HtmlID + '" class="box gradient Case"><div class="inner ' + this.getLocalizedClass(sourcePoint.IsLabelLocalized) + '"><span class="Editable">' + sourcePoint.Label + '</span></div></div>';
    },


    /*
    *   Returns node icon HTML representation.
    */
    getNodeIconClass: function () {
        return 'icon-diamond';
    },


    /*
    *   Returns node icon HTML representation.
    */
    getNodeIconHtmlRepresentation: function () {
        var tooltip = this.graph.getResourceString(this.definition.TypeName + "Tooltip");
        if (!tooltip) {
            tooltip = '';
        } else {
            tooltip = 'title="' + tooltip + '"';
        }
        return '<i class="' + this.getNodeIconClass() + ' " aria-hidden="true" ' + tooltip + ' ></i>';
    },


    /*
    *   Returns id of html row element.
    */
    getHtmlRowId: function (id) {
        return this.htmlId + id;
    },


    /*
    *   Returns correct HTML representation of content.
    */
    getContentHtmlRepresentation: function () {
        return '<div class="content gray gradient">' + this.content + '<div class="Cases"></div>' + this.getFooterHtmlRepresentation() + '</div>';
    },


    /*
    *   Redefinition of inherited method.
    *   Recounts anchors positions of case source points
    */
    resizeSourcePoint: function (sourcePoint, id) {
        if (sourcePoint.sourcePointType == "switchCase") {
            var anchor = this.getCaseSourcePointAnchors(id);
            sourcePoint.anchor = anchor;
        }
    },


    /*
    *   Returns recalculated dynamic anchors of case source point.
    */
    getCaseSourcePointAnchors: function (switchCaseId) {
        var anchorTopOffset = this.getAnchorRelativeTopOffset(switchCaseId);
        var anchors = [[1, anchorTopOffset, 1, 0],
                       [0, anchorTopOffset, -1, 0]];
        return this.myJsPlumb.makeDynamicAnchor(anchors);
    },


    /*
    *   Returns calculated offset of case source point from top of node.
    */
    getAnchorRelativeTopOffset: function (switchCaseId) {
        var rowJQ = $cmsj("#" + this.getHtmlRowId(switchCaseId));
        var topOffset = rowJQ.offset().top - this.nodeJQ.offset().top;
        topOffset += (rowJQ.outerHeight() / 2);
        topOffset /= this.nodeJQ.outerHeight();

        return topOffset;
    },


    /*
    *   Returns query string of source point.
    */
    getSourcepointQueryString: function (sourcePointId) {
        if (sourcePointId) {
            return "&sourcepointGuid=" + sourcePointId;
        }
        return "";
    },


    /*
    *   Removes case row.
    */
    removeCaseRow: function (caseId) {
        $cmsj("#" + this.getHtmlRowId(caseId)).remove();
        $cmsj("#" + this.getHtmlRowId(caseId) + "tooltip").remove();
        this.removeSourcePoint(caseId);
    }
});