@linkurious/ogma-linkurious-parser 4.1.6 → 4.1.8

package/dist/ogma/features/styles.js

@@ -1,689 +0,0 @@
-'use strict';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StylesViz = exports.FILTER_OPACITY = void 0;
-const __1 = require("../..");
-const tools_1 = require("../../tools/tools");
-const HOVERED_SELECTED_NODE_STYLE = {
-    text: {
-        style: 'bold',
-        backgroundColor: '#fff',
-        minVisibleSize: 0
-    },
-    outerStroke: { width: 2 },
-    outline: false
-};
-const HOVERED_SELECTED_EDGE_STYLE = {
-    text: {
-        style: 'bold',
-        backgroundColor: '#fff',
-        minVisibleSize: 0
-    },
-    outline: false
-};
-const NODE_HALO_CONFIGURATION = {
-    color: '#FFF',
-    width: 7,
-    scalingMethod: 'scaled',
-    strokeWidth: 0,
-    hideNonAdjacentEdges: false
-};
-const EDGE_HALO_CONFIGURATION = {
-    color: '#FFF',
-    scalingMethod: 'scaled',
-    width: 4
-};
-const DEFAULT_OGMA_FONT = "'roboto', sans-serif";
-const DARK_FONT_COLOR = '#000';
-const CLEAR_FONT_COLOR = '#FFF';
-const ITEM_DEFAULT_COLOR = '#7f7f7f';
-exports.FILTER_OPACITY = 0.2;
-class StylesViz {
-    constructor(ogma, configuration) {
-        this._nodeAttributes = new __1.NodeAttributes({});
-        this._edgeAttributes = new __1.EdgeAttributes({});
-        this._ogma = ogma;
-        this._defaultConfiguration = configuration;
-        this._nodeAttributes.setBaseUrl(configuration.baseUrl);
-    }
-    /**
-     * Set nodes default styles based on the configuration
-     */
-    setNodesDefaultStyles() {
-        // setting selection and hover attributes
-        this._ogma.styles.setHoveredNodeAttributes(HOVERED_SELECTED_NODE_STYLE);
-        this._ogma.styles.setSelectedNodeAttributes(HOVERED_SELECTED_NODE_STYLE);
-        // setting default styles
-        this._nodeDefaultStylesRules = this._ogma.styles.addRule({
-            nodeAttributes: {
-                text: {
-                    padding: 5,
-                    minVisibleSize: this._defaultConfiguration.node.text !== undefined &&
-                        this._defaultConfiguration.node.text.minVisibleSize
-                        ? this._defaultConfiguration.node.text.minVisibleSize
-                        : 12,
-                    maxLineLength: this._defaultConfiguration.node.text !== undefined &&
-                        this._defaultConfiguration.node.text.maxLineLength !== undefined
-                        ? this._defaultConfiguration.node.text.maxLineLength
-                        : 30,
-                    position: this._defaultConfiguration.node.text !== undefined &&
-                        this._defaultConfiguration.node.text.nodePosition !== undefined
-                        ? this._defaultConfiguration.node.text.nodePosition
-                        : 'bottom',
-                    backgroundColor: this._defaultConfiguration.node.text !== undefined &&
-                        this._defaultConfiguration.node.text.backgroundColor !== undefined
-                        ? this._defaultConfiguration.node.text.backgroundColor
-                        : undefined,
-                    font: this._defaultConfiguration.node.text !== undefined &&
-                        this._defaultConfiguration.node.text.font !== undefined
-                        ? this._defaultConfiguration.node.text.font
-                        : "'roboto', sans-serif",
-                    color: this._defaultConfiguration.node.text !== undefined &&
-                        this._defaultConfiguration.node.text.color !== undefined
-                        ? this._defaultConfiguration.node.text.color
-                        : 'black',
-                    size: this._defaultConfiguration.node.text !== undefined &&
-                        this._defaultConfiguration.node.text.size !== undefined
-                        ? this._defaultConfiguration.node.text.size
-                        : 14,
-                    margin: 5
-                },
-                radius: this.defaultNodeRadius(this._defaultConfiguration.node),
-                icon: {
-                    minVisibleSize: 15
-                },
-                color: ITEM_DEFAULT_COLOR,
-                shape: this._defaultConfiguration.node.shape !== undefined
-                    ? this._defaultConfiguration.node.shape
-                    : 'circle',
-                innerStroke: {
-                    width: 3
-                },
-                outline: false
-            }
-        });
-    }
-    /**
-     * Set edges default styles based on the configuration
-     */
-    setEdgesDefaultStyles() {
-        var _a;
-        // setting selection and hover attributes
-        this._ogma.styles.setHoveredEdgeAttributes(HOVERED_SELECTED_EDGE_STYLE);
-        this._ogma.styles.setSelectedEdgeAttributes(HOVERED_SELECTED_EDGE_STYLE);
-        // setting default styles
-        this._edgeDefaultStylesRules = this._ogma.styles.addRule({
-            edgeAttributes: {
-                text: {
-                    minVisibleSize: this._defaultConfiguration.edge.text !== undefined &&
-                        this._defaultConfiguration.edge.text.minVisibleSize
-                        ? this._defaultConfiguration.edge.text.minVisibleSize
-                        : 3,
-                    maxLineLength: this._defaultConfiguration.edge.text !== undefined &&
-                        this._defaultConfiguration.edge.text.maxLineLength !== undefined
-                        ? this._defaultConfiguration.edge.text.maxLineLength
-                        : 30,
-                    backgroundColor: this._defaultConfiguration.edge.text !== undefined &&
-                        this._defaultConfiguration.edge.text.backgroundColor !== undefined
-                        ? this._defaultConfiguration.edge.text.backgroundColor
-                        : undefined,
-                    font: this._defaultConfiguration.edge.text !== undefined &&
-                        this._defaultConfiguration.edge.text.font !== undefined
-                        ? this._defaultConfiguration.edge.text.font
-                        : "'roboto', sans-serif",
-                    color: ((_a = this._defaultConfiguration.edge) === null || _a === void 0 ? void 0 : _a.text) !== undefined &&
-                        this._defaultConfiguration.edge.text.color !== undefined
-                        ? this._defaultConfiguration.edge.text.color
-                        : 'black',
-                    size: this._defaultConfiguration.edge.text !== undefined &&
-                        this._defaultConfiguration.edge.text.size !== undefined
-                        ? this._defaultConfiguration.edge.text.size
-                        : 14
-                },
-                width: this.defaultEdgeWidth(this._defaultConfiguration.edge),
-                shape: this._defaultConfiguration.edge.shape !== undefined
-                    ? this._defaultConfiguration.edge.shape
-                    : 'arrow',
-                color: ITEM_DEFAULT_COLOR
-            }
-        });
-    }
-    /**
-     * Set nodes default styles based on the configuration
-     */
-    setNodesDefaultHalo() {
-        // setting default halo style
-        this._nodeDefaultHaloRules = this._ogma.styles.addRule({
-            nodeSelector: (node) => node && !node.hasClass('filtered'),
-            nodeAttributes: {
-                halo: (node) => {
-                    if (node !== undefined &&
-                        !node.hasClass('filtered') &&
-                        (node.isSelected() ||
-                            node.getAdjacentNodes({}).isSelected().includes(true) ||
-                            node.getAdjacentEdges().isSelected().includes(true))) {
-                        return Object.assign(Object.assign({}, NODE_HALO_CONFIGURATION), { scalingMethod: this._ogma.geo.enabled() ? 'fixed' : 'scaled' });
-                    }
-                    return null;
-                }
-            },
-            // recalculate the rule *only* when itself or adjacent
-            // elements change their selection status
-            nodeDependencies: {
-                self: {
-                    selection: true
-                },
-                adjacentNodes: {
-                    selection: true
-                },
-                adjacentEdges: {
-                    selection: true
-                }
-            }
-        });
-    }
-    /**
-     * Set edges default styles based on the configuration
-     */
-    setEdgesDefaultHalo() {
-        // setting default halo styles
-        this._edgeDefaultHaloRules = this._ogma.styles.addRule({
-            edgeSelector: (edge) => edge && edge.getSource() && edge.getTarget() && !edge.hasClass('filtered'),
-            edgeAttributes: {
-                halo: (edge) => {
-                    if (edge &&
-                        !edge.hasClass('filtered') &&
-                        (edge.isSelected() || edge.getSource().isSelected() || edge.getTarget().isSelected())) {
-                        return Object.assign(Object.assign({}, EDGE_HALO_CONFIGURATION), { scalingMethod: this._ogma.geo.enabled() ? 'fixed' : 'scaled' });
-                    }
-                    return null;
-                }
-            },
-            // this rule will only be invoked when the selection status
-            // of the edge or it's extremities is changed
-            edgeDependencies: {
-                self: {
-                    selection: true
-                },
-                extremities: {
-                    selection: true
-                }
-            }
-        });
-    }
-    /**
-     * Return the default node radius set in configuration or 5
-     *
-     * @returns {number}
-     */
-    defaultNodeRadius(styles) {
-        return this.defaultStylesHas(styles, ['nodeRadius']) ? styles.nodeRadius : 5;
-    }
-    /**
-     * Return the default edge width set in configuration or 1
-     *
-     * @returns {number}
-     */
-    defaultEdgeWidth(styles) {
-        return this.defaultStylesHas(styles, ['edgeWidth']) ? styles.edgeWidth : 1;
-    }
-    /**
-     * Check if a style property exists in the default styles object
-     */
-    defaultStylesHas(styles, propertyPath) {
-        if (!tools_1.Tools.isDefined(styles)) {
-            return false;
-        }
-        return tools_1.Tools.getIn(styles, propertyPath) !== undefined;
-    }
-    /**
-     * Set styles for the class "filtered"
-     */
-    setFilterClass() {
-        this._ogma.styles.createClass({
-            name: 'filtered',
-            nodeAttributes: {
-                opacity: exports.FILTER_OPACITY,
-                layer: (node) => {
-                    // if the node is part of a virtual node, it should be on top
-                    if (node.getMetaNode() !== null) {
-                        return 1;
-                    }
-                    return -1;
-                },
-                detectable: false,
-                badges: {
-                    topRight: {
-                        text: null
-                    },
-                    bottomRight: {
-                        text: null
-                    }
-                },
-                text: null,
-                color: 'rgb(240, 240, 240)',
-                innerStroke: {
-                    width: 1,
-                    color: __1.BASE_GREY,
-                    minVisibleSize: 1
-                },
-                shape: 'circle',
-                image: null,
-                icon: null,
-                radius: '50%'
-            },
-            edgeAttributes: {
-                opacity: exports.FILTER_OPACITY,
-                layer: (edge) => {
-                    const isEdgeInsideNodeGroup = edge
-                        .getExtremities()
-                        .getMetaNode()
-                        .some((node) => node !== null);
-                    // if the edge is part of a virtual node, it should be on top
-                    if (!edge.isVirtual() && isEdgeInsideNodeGroup) {
-                        return 1;
-                    }
-                    return -1;
-                },
-                detectable: false,
-                text: null,
-                color: __1.BASE_GREY,
-                shape: 'line',
-                width: 0.2
-            }
-        });
-    }
-    /**
-     * Set the class for exported nodes and edges
-     */
-    setExportClass(textWrappingLength) {
-        if (!this._exportClass) {
-            this._exportClass = this._ogma.styles.createClass({
-                name: 'exported',
-                nodeAttributes: {
-                    text: {
-                        minVisibleSize: 0,
-                        size: 12,
-                        maxLineLength: textWrappingLength ? 30 : 0
-                    },
-                    halo: null
-                },
-                edgeAttributes: {
-                    text: {
-                        minVisibleSize: 0,
-                        size: 12
-                    },
-                    halo: null
-                }
-            });
-        }
-        else {
-            this._exportClass.update({
-                nodeAttributes: {
-                    text: {
-                        maxLineLength: textWrappingLength ? 30 : 0
-                    },
-                    halo: null
-                }
-            });
-        }
-    }
-    /**
-     * Set the rule to display badges
-     */
-    setBadgeRule() {
-        this._ogma.styles.createClass({
-            name: 'degreeIndicator',
-            nodeAttributes: {
-                badges: {
-                    topRight: (node) => {
-                        if (node !== undefined) {
-                            const degree = tools_1.Tools.getHiddenNeighbors(node.toList());
-                            const badgeContent = tools_1.Tools.formatNumber(degree);
-                            if (degree > 0) {
-                                const nodeColor = Array.isArray(node.getAttribute('color'))
-                                    ? node.getAttribute('color')[0]
-                                    : node.getAttribute('color');
-                                const textColor = __1.OgmaTools.isBright(nodeColor)
-                                    ? DARK_FONT_COLOR
-                                    : CLEAR_FONT_COLOR;
-                                const isSupernode = node.getData(['statistics', 'supernode']);
-                                let content = null;
-                                if (+badgeContent !== 0) {
-                                    content = isSupernode ? badgeContent + '+' : badgeContent;
-                                }
-                                return {
-                                    color: 'inherit',
-                                    minVisibleSize: 20,
-                                    stroke: {
-                                        width: 0,
-                                        color: null
-                                    },
-                                    text: {
-                                        font: this._defaultConfiguration.node.text !== undefined &&
-                                            this._defaultConfiguration.node.text.font !== undefined
-                                            ? this._defaultConfiguration.node.text.font
-                                            : DEFAULT_OGMA_FONT,
-                                        scale: 0.4,
-                                        color: textColor,
-                                        content: content
-                                    }
-                                };
-                            }
-                        }
-                    }
-                }
-            }
-        });
-        this._ogma.styles.createClass({
-            name: 'pinnedIndicator',
-            nodeAttributes: {
-                badges: {
-                    bottomRight: (node) => {
-                        if (node !== undefined && !node.getAttribute('layoutable')) {
-                            return {
-                                color: this._findPinBadgeBackgroundColor(node),
-                                minVisibleSize: 20,
-                                scale: this._findPinBadgeScale(node),
-                                stroke: {
-                                    width: 0,
-                                    color: null
-                                },
-                                text: {
-                                    font: 'FontAwesome',
-                                    scale: 0.4,
-                                    color: this._findPinBadgeTextColor(node),
-                                    content: node.getAttribute('layoutable') ? null : '\uf08d'
-                                }
-                            };
-                        }
-                    }
-                }
-            },
-            nodeDependencies: {
-                self: { attributes: ['layoutable'] }
-            }
-        });
-        this._ogma.events.on('addNodes', (nodesEvent) => nodesEvent.nodes.addClass('degreeIndicator'));
-        this._ogma.events.on('addNodes', (nodesEvent) => nodesEvent.nodes.addClass('pinnedIndicator'));
-    }
-    /**
-     * Delete the rule to display badges
-     */
-    deleteBadgeRule() {
-        this._ogma.getNodes().removeClasses(['degreeIndicator', 'pinnedIndicator'], 0);
-    }
-    /**
-     * set text overlap to true or false
-     *
-     * @param {boolean} overlap
-     */
-    toggleTextOverlap(overlap) {
-        this._ogma.setOptions({ texts: { preventOverlap: overlap } });
-    }
-    /**
-     * refresh nodes and edge rules
-     *
-     */
-    refreshRules() {
-        this._nodeDefaultStylesRules.refresh();
-        this._edgeDefaultStylesRules.refresh();
-    }
-    /**
-     * Create / refresh an ogma rule for node colors
-     */
-    refreshNodeColors(colorStyleRules) {
-        if (!tools_1.Tools.isDefined(this._ogmaNodeColor)) {
-            this._nodeAttributes.refresh({ color: colorStyleRules });
-            this._ogmaNodeColor = this._ogma.styles.addRule({
-                nodeAttributes: {
-                    color: (node) => {
-                        if (node !== undefined) {
-                            return this._nodeAttributes.color(node.getData());
-                        }
-                    }
-                },
-                nodeDependencies: { self: { data: true } }
-            });
-        }
-        else {
-            this._nodeAttributes.refresh({ color: colorStyleRules });
-            this._ogmaNodeColor.refresh();
-            // TODO refresh node icons when moving the code from LKE
-            // this.refreshIconsColor();
-        }
-    }
-    /**
-     * Return an array of StyleRules with only the style that need to be applied
-     */
-    getStyleRule(state, styleType) {
-        return new __1.StyleRules(state)[styleType];
-    }
-    initNodeColors(nodeRules) {
-        const nodeColorRules = this.getStyleRule(nodeRules, __1.StyleType.COLOR);
-        this.refreshNodeColors(nodeColorRules);
-    }
-    initNodesIcons(nodeRules) {
-        const nodeIconsRules = this.getStyleRule(nodeRules, __1.StyleType.ICON);
-        this.refreshNodeIcons(nodeIconsRules);
-    }
-    initNodesSizes(nodeRules) {
-        const nodeSizeRules = this.getStyleRule(nodeRules, __1.StyleType.SIZE);
-        this.refreshNodeSize(nodeSizeRules);
-    }
-    initNodesShapes(nodeRules) {
-        const nodeShapesRules = this.getStyleRule(nodeRules, __1.StyleType.SHAPE);
-        this.refreshNodeShape(nodeShapesRules);
-    }
-    initEdgesWidth(edgeRules) {
-        const edgesWidthRules = this.getStyleRule(edgeRules, __1.StyleType.WIDTH);
-        this.refreshEdgeWidth(edgesWidthRules);
-    }
-    initEdgesShape(edgeRules) {
-        const edgesShapeRules = this.getStyleRule(edgeRules, __1.StyleType.SHAPE);
-        this.refreshEdgeShape(edgesShapeRules);
-    }
-    initEdgesColor(edgeRules) {
-        const edgesColorRules = this.getStyleRule(edgeRules, __1.StyleType.COLOR);
-        this.refreshEdgeColors(edgesColorRules);
-    }
-    /**
-     * Create / refresh an ogma rule for node icons
-     *
-     * @param {Array<any>} iconStyleRules
-     */
-    refreshNodeIcons(iconStyleRules) {
-        if (!tools_1.Tools.isDefined(this._ogmaNodeIcon)) {
-            this._nodeAttributes.refresh({ icon: iconStyleRules });
-            this._ogmaNodeIcon = this._ogma.styles.addRule({
-                nodeAttributes: {
-                    icon: (node) => {
-                        if (node !== undefined) {
-                            return this._nodeAttributes.icon(node.getData()).icon;
-                        }
-                    },
-                    image: (node) => {
-                        if (node !== undefined && !node.isVirtual()) {
-                            return this._nodeAttributes.icon(node.getData()).image;
-                        }
-                    }
-                },
-                nodeDependencies: { self: { data: true } }
-            });
-        }
-        else {
-            this._nodeAttributes.refresh({ icon: iconStyleRules });
-            void this._ogmaNodeIcon.refresh();
-        }
-    }
-    /**
-     * Create / refresh an ogma rule for node sizes
-     *
-     * @param {Array<any>} sizeStyleRules
-     */
-    refreshNodeSize(sizeStyleRules) {
-        if (!tools_1.Tools.isDefined(this._ogmaNodeSize)) {
-            this._nodeAttributes.refresh({ size: sizeStyleRules });
-            this._ogmaNodeSize = this._ogma.styles.addRule({
-                nodeAttributes: {
-                    radius: (node) => {
-                        if (node !== undefined) {
-                            return this._nodeAttributes.size(node.getData());
-                        }
-                    }
-                },
-                nodeDependencies: { self: { data: true } }
-            });
-        }
-        else {
-            this._nodeAttributes.refresh({ size: sizeStyleRules });
-            this._ogmaNodeSize.refresh();
-        }
-    }
-    /**
-     * Create / refresh an ogma rule for node images
-     *
-     * @param {Array<any>} shapeStyleRules
-     */
-    refreshNodeShape(shapeStyleRules) {
-        if (!tools_1.Tools.isDefined(this._ogmaNodeShape)) {
-            this._nodeAttributes.refresh({ shape: shapeStyleRules });
-            this._ogmaNodeShape = this._ogma.styles.addRule({
-                nodeAttributes: {
-                    shape: (node) => {
-                        if (node !== undefined) {
-                            return this._nodeAttributes.shape(node.getData());
-                        }
-                    }
-                },
-                nodeSelector: (node) => node !== undefined && !node.isVirtual(),
-                nodeDependencies: { self: { data: true } }
-            });
-        }
-        else {
-            this._nodeAttributes.refresh({ shape: shapeStyleRules });
-            this._ogmaNodeShape.refresh();
-        }
-    }
-    /**
-     * Create / refresh an ogma rule for edge colors
-     */
-    refreshEdgeColors(colorStyleRules) {
-        if (!tools_1.Tools.isDefined(this._ogmaEdgeColor)) {
-            this._edgeAttributes.refresh({ color: colorStyleRules });
-            this._ogmaEdgeColor = this._ogma.styles.addRule({
-                edgeAttributes: {
-                    color: (edge) => {
-                        if (edge !== undefined) {
-                            return this._edgeAttributes.color(edge.getData());
-                        }
-                    }
-                },
-                edgeDependencies: { self: { data: true } }
-            });
-        }
-        else {
-            this._edgeAttributes.refresh({ color: colorStyleRules });
-            this._ogmaEdgeColor.refresh();
-        }
-    }
-    /**
-     * Create / refresh an ogma rule for edge width
-     *
-     * @param {Array<LKStyleRule>} widthStyleRules
-     */
-    refreshEdgeWidth(widthStyleRules) {
-        if (!tools_1.Tools.isDefined(this._ogmaEdgeWidth)) {
-            this._edgeAttributes.refresh({ width: widthStyleRules });
-            this._ogmaEdgeWidth = this._ogma.styles.addRule({
-                edgeAttributes: {
-                    width: (edge) => {
-                        if (edge !== undefined) {
-                            return this._edgeAttributes.width(edge.getData());
-                        }
-                    }
-                },
-                edgeDependencies: {
-                    self: { data: true }
-                }
-            });
-        }
-        else {
-            this._edgeAttributes.refresh({ width: widthStyleRules });
-            this._ogmaEdgeWidth.refresh();
-        }
-    }
-    /**
-     * Create / refresh an ogma rule for edge width
-     *
-     * @param {Array<LKStyleRule>} shapeStyleRules
-     */
-    refreshEdgeShape(shapeStyleRules) {
-        if (!tools_1.Tools.isDefined(this._ogmaEdgeShape)) {
-            this._edgeAttributes.refresh({ shape: shapeStyleRules });
-            this._ogmaEdgeShape = this._ogma.styles.addRule({
-                edgeAttributes: {
-                    shape: (edge) => {
-                        if (edge !== undefined) {
-                            return this._edgeAttributes.shape(edge.getData());
-                        }
-                    }
-                },
-                edgeDependencies: { self: { data: true } }
-            });
-        }
-        else {
-            this._edgeAttributes.refresh({ shape: shapeStyleRules });
-            this._ogmaEdgeShape.refresh();
-        }
-    }
-    /**
-     * Get node radius
-     * This is a workaround for an ogma issue where the radius of virtual nodes is always set to 5
-     * TODO: check if this is still needed after ogma release the new improvement for transformation v5.X
-     */
-    _getNodeRadius(node) {
-        var _a;
-        if (!node.isVirtual()) {
-            return node.getAttribute('radius');
-        }
-        else {
-            // get the width and height of the box that contains the nodes inside the virtual node
-            const { width, height } = (_a = node.getSubNodes()) === null || _a === void 0 ? void 0 : _a.getBoundingBox();
-            return Math.max(width, height);
-        }
-    }
-    /**
-     * Calculate the scale of the pin badge related to the node radius
-     * This is useful when dealing wih huge nodes, and we don't want the badge to be big
-     * If the node is small enough, the badge will be 0.46 of the node radius
-     * Else it will be 5 / radius
-     */
-    _findPinBadgeScale(node) {
-        // the maximum radius for the badge
-        const MAX = 5;
-        const defaultRatio = 0.46;
-        const bigNodeRatio = 0.17;
-        const radius = this._getNodeRadius(node);
-        return radius * defaultRatio > MAX ? bigNodeRatio : defaultRatio;
-    }
-    /**
-     * Find the color of the pin badge text
-     */
-    _findPinBadgeTextColor(node) {
-        if (node.isVirtual()) {
-            return CLEAR_FONT_COLOR;
-        }
-        const nodeColor = Array.isArray(node.getAttribute('color'))
-            ? node.getAttribute('color')[0]
-            : node.getAttribute('color');
-        return __1.OgmaTools.isBright(nodeColor) ? DARK_FONT_COLOR : CLEAR_FONT_COLOR;
-    }
-    /**
-     * Find the color of the pin badge background
-     */
-    _findPinBadgeBackgroundColor(node) {
-        return node.isVirtual() ? __1.BASE_GREY : 'inherit';
-    }
-}
-exports.StylesViz = StylesViz;
-//# sourceMappingURL=styles.js.map