@reltio/graph 1.4.1585 → 1.4.1586-mui5

package/src/rendering/canvas/hover.ts

@@ -0,0 +1,13 @@
+import {Settings} from 'sigma/settings';
+import {NodeDisplayData, PartialButFor} from 'sigma/types';
+import {drawLabel} from './label';
+import {drawNodeBackground} from './nodeBackground';
+
+export const drawHover = (
+    context: CanvasRenderingContext2D,
+    data: PartialButFor<NodeDisplayData, 'x' | 'y' | 'size' | 'label'>,
+    settings: Settings
+): void => {
+    drawNodeBackground(context, data, settings, true);
+    drawLabel(context, data, settings, false);
+};

package/src/rendering/canvas/label.ts

@@ -0,0 +1,33 @@
+/*
+ * This file copies sigma/rendering/canvas/label.ts with custom style
+ */
+import {Settings} from 'sigma/settings';
+import {NodeDisplayData, PartialButFor} from 'sigma/types';
+import {drawNodeBackground} from './nodeBackground';
+
+export const drawLabel = (
+    context: CanvasRenderingContext2D,
+    data: PartialButFor<NodeDisplayData, 'x' | 'y' | 'size' | 'label'>,
+    settings: Settings,
+    drawBackground = true
+): void => {
+    if (!data.label) return;
+
+    const size = settings.labelSize,
+        font = settings.labelFont,
+        weight = settings.labelWeight;
+
+    if (drawBackground) {
+        drawNodeBackground(context, data, settings, false);
+    }
+
+    context.shadowOffsetX = 0;
+    context.shadowOffsetY = 0;
+    context.shadowBlur = 0;
+
+    context.fillStyle = settings.labelColor?.attribute
+        ? data[settings.labelColor.attribute] || settings.labelColor.color || '#000'
+        : settings.labelColor.color;
+    context.font = `${weight} ${size}px ${font}`;
+    context.fillText(data.label, data.x + data.size + 11, data.y + size / 3);
+};

package/src/rendering/canvas/nodeBackground.ts

@@ -0,0 +1,61 @@
+/*
+ * This file part of sigma/rendering/canvas/hover.ts with custom style
+ */
+import {Settings} from 'sigma/settings';
+import {NodeDisplayData, PartialButFor} from 'sigma/types';
+
+const PADDING = 2;
+
+export const drawNodeBackground = (
+    context: CanvasRenderingContext2D,
+    data: PartialButFor<NodeDisplayData, 'x' | 'y' | 'size' | 'label'>,
+    settings: Settings,
+    drawNodeArc = true
+): void => {
+    context.fillStyle = '#FFF';
+    context.shadowOffsetX = 0;
+    context.shadowOffsetY = 2;
+    context.shadowBlur = 3;
+    context.shadowColor = 'rgba(0,0,0,0.2)';
+
+    if (typeof data.label === 'string') {
+        const size = settings.labelSize + 2;
+        const borderRadius = 2;
+
+        const textWidth = context.measureText(data.label).width,
+            boxWidth = Math.round(textWidth + 16),
+            boxHeight = Math.round(size + 2 * PADDING),
+            radius = Math.max(data.size, size / 2) + PADDING;
+
+        const top = data.y - boxHeight / 2;
+        const bottom = data.y + boxHeight / 2;
+        const left = data.x + (drawNodeArc ? 0 : radius);
+        const right = left + boxWidth + (drawNodeArc ? radius : 0);
+
+        context.beginPath();
+        context.moveTo(left, bottom - borderRadius);
+        context.quadraticCurveTo(left, bottom, left + borderRadius, bottom);
+        context.lineTo(right - borderRadius, bottom);
+        context.quadraticCurveTo(right, bottom, right, bottom - borderRadius);
+        context.lineTo(right, top + borderRadius);
+        context.quadraticCurveTo(right, top, right - borderRadius, top);
+        context.lineTo(left + borderRadius, top);
+        context.quadraticCurveTo(left, top, left, top + borderRadius);
+        context.closePath();
+        context.fill();
+
+        if (drawNodeArc) {
+            context.shadowOffsetX = -2;
+            context.shadowOffsetY = 0;
+            context.beginPath();
+            context.arc(data.x, data.y, radius, 0, Math.PI * 2);
+            context.closePath();
+            context.fill();
+        }
+    } else if (drawNodeArc) {
+        context.beginPath();
+        context.arc(data.x, data.y, data.size + PADDING, 0, Math.PI * 2);
+        context.closePath();
+        context.fill();
+    }
+};

package/src/rendering/canvas/selfRelationLoop.ts

@@ -0,0 +1,108 @@
+import {NodeDisplayData, PartialButFor} from 'sigma/types';
+import {EdgeAttributes} from '../../types/graphDataTypes';
+
+const ARROW_SCALE = 0.4;
+const LOOP_SCALE = 0.6;
+const ARROW_SIZE_RATIO_SCALE = 2.2;
+
+const getSelfLoopControlPoints = (x: number, y: number, size: number, a = 0) => {
+    return {
+        x1: x - (size + a) * 7,
+        y1: y,
+        x2: x,
+        y2: y + (size + a) * 7
+    };
+};
+
+const getArrowPoints = (x: number, y: number, d: number, sX: number, sY: number, size: number, aSize: number) => {
+    const aX = x + ((sX - x) * (d - aSize - size)) / d;
+    const aY = y + ((sY - y) * (d - aSize - size)) / d;
+    const vX = ((sX - x) * aSize) / d;
+    const vY = ((sY - y) * aSize) / d;
+    return {aX, aY, vX, vY};
+};
+
+const getFirstArrowPoints = (
+    cp: ReturnType<typeof getSelfLoopControlPoints>,
+    sX: number,
+    sY: number,
+    size: number,
+    aSize: number
+) => {
+    const d = Math.sqrt(Math.pow(sX - cp.x1, 2) + Math.pow(sY - cp.y1, 2));
+    return getArrowPoints(cp.x2, cp.y2, d, sX, sY, size, aSize);
+};
+
+const getSecondArrowPoints = (
+    cp: ReturnType<typeof getSelfLoopControlPoints>,
+    sX: number,
+    sY: number,
+    size: number,
+    aSize: number
+) => {
+    const d = Math.sqrt(Math.pow(sX - cp.x1, 2) + Math.pow(sY - cp.y1, 2));
+    return getArrowPoints(cp.x1, cp.y1, d, sX, sY, size, aSize);
+};
+
+const drawArrow = (context: CanvasRenderingContext2D, aX: number, aY: number, vX: number, vY: number) => {
+    context.beginPath();
+    context.moveTo(aX + vX, aY + vY);
+    context.lineTo(aX + vY * ARROW_SCALE, aY - vX * ARROW_SCALE);
+    context.lineTo(aX - vY * ARROW_SCALE, aY + vX * ARROW_SCALE);
+    context.lineTo(aX + vX, aY + vY);
+    context.closePath();
+    context.fill();
+};
+
+const drawSelfRelationLoop = (
+    context: CanvasRenderingContext2D,
+    edgeData: EdgeAttributes,
+    sourceData: PartialButFor<NodeDisplayData, 'x' | 'y' | 'size'>
+): Path2D => {
+    const {size, color, arrowSizeRatio = 1} = edgeData;
+    const sX = sourceData.x;
+    const sY = sourceData.y;
+    const sSize = sourceData.size;
+    const scale = sSize * LOOP_SCALE;
+    const cp = getSelfLoopControlPoints(sX, sY, scale);
+
+    context.strokeStyle = color;
+    context.lineWidth = size;
+
+    const bezier = new Path2D();
+
+    if (edgeData.type === 'arrow' || edgeData.type === 'doubleArrow') {
+        context.fillStyle = color;
+        if (edgeData.type === 'doubleArrow') {
+            const firstArrowPoints = getFirstArrowPoints(
+                cp,
+                sX,
+                sY,
+                sSize,
+                size * arrowSizeRatio * ARROW_SIZE_RATIO_SCALE
+            );
+            drawArrow(context, firstArrowPoints.aX, firstArrowPoints.aY, firstArrowPoints.vX, firstArrowPoints.vY);
+            bezier.moveTo(firstArrowPoints.aX, firstArrowPoints.aY);
+        } else {
+            bezier.moveTo(sX, sY);
+        }
+        const secondArrowPoints = getSecondArrowPoints(
+            cp,
+            sX,
+            sY,
+            sSize,
+            size * arrowSizeRatio * ARROW_SIZE_RATIO_SCALE
+        );
+        bezier.bezierCurveTo(cp.x2, cp.y2, cp.x1, cp.y1, secondArrowPoints.aX, secondArrowPoints.aY);
+        context.stroke(bezier);
+        drawArrow(context, secondArrowPoints.aX, secondArrowPoints.aY, secondArrowPoints.vX, secondArrowPoints.vY);
+    } else {
+        bezier.moveTo(sX, sY);
+        bezier.bezierCurveTo(cp.x1, cp.y1, cp.x2, cp.y2, sX, sY);
+        context.stroke(bezier);
+    }
+
+    return bezier;
+};
+
+export {drawSelfRelationLoop};

package/src/rendering/canvas/tooltip.ts

@@ -0,0 +1,38 @@
+const drawRoundedRect = (
+    context: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number
+) => {
+    context.beginPath();
+    context.moveTo(x, y + radius);
+    context.arcTo(x, y + height, x + radius, y + height, radius);
+    context.arcTo(x + width, y + height, x + width, y + height - radius, radius);
+    context.arcTo(x + width, y, x + width - radius, y, radius);
+    context.arcTo(x, y, x, y + radius, radius);
+    context.fill();
+};
+
+const drawTooltip = (context: CanvasRenderingContext2D, centerX: number, centerY: number, text: string) => {
+    context.font = 'normal 10px Roboto';
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+
+    const xPadding = 8;
+    const width = context.measureText(text).width + xPadding * 2;
+    const height = 24;
+    const radius = 4;
+
+    const x = centerX - width / 2;
+    const y = centerY - height / 2;
+
+    context.fillStyle = 'rgba(0, 0, 0, 0.54)';
+    drawRoundedRect(context, x, y, width, height, radius);
+
+    context.fillStyle = '#fff';
+    context.fillText(text, x + width / 2, y + height / 2);
+};
+
+export {drawTooltip};

package/src/rendering/icons/collapseIcon.inline.svg.ts

@@ -0,0 +1,6 @@
+export const COLLAPSE_ICON = `<svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="white"/>
+<circle cx="8" cy="8" r="7.5" stroke="black" stroke-opacity="0.541176"/>
+<path d="M4 7.20004H12V8.80004H4V7.20004Z" fill="black" fill-opacity="0.541176"/>
+</svg>
+`;

package/src/rendering/icons/expandIcon.inline.svg.ts

@@ -0,0 +1,5 @@
+export const EXPAND_ICON = `<svg width="32" height="32" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8" cy="8" r="8" fill="white"/>
+<circle cx="8" cy="8" r="7.5" stroke="black" stroke-opacity="0.541176"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.80013 7.20003V4H7.20013L7.20013 7.20003H4V8.80003H7.20013L7.20013 12H8.80013V8.80003H12V7.20003H8.80013Z" fill="black" fill-opacity="0.541176"/>
+</svg>`;

package/src/rendering/icons/no_photo.inline.svg.ts

@@ -0,0 +1,13 @@
+export const DEFAULT_PROFILE_IMAGE = `
+<svg width="400px" height="400px" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Group</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" fill-rule="nonzero">
+            <rect id="Rectangle" fill="#DFE5E9" x="0" y="0" width="400" height="400"></rect>
+            <path d="M0,387.023257 L0,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 0,387.023257 Z" id="Path" fill="#B3BCC4"></path>
+            <path d="M0,387.023257 L0,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 0,387.023257 Z" id="Path" fill="#B3BCC4"></path>
+            <path d="M5.68434189e-14,387.023257 L5.68434189e-14,399.918908 L400,399.918908 L400,386.023594 C366.631,377.336524 321.866,364.269931 315.979,359.161654 C308.985,353.083704 270.481,310.508063 270.481,310.508063 L270.481,286.186267 C270.481,286.186267 284.478,266.204006 284.478,261.854473 C284.478,257.515936 285.353,246.219746 291.481,241.011503 C297.61,235.792263 311.607,211.471466 312.481,206.253226 C313.355,201.043983 319.484,188.009379 312.481,185.400259 C305.478,182.801135 307.236,173.244359 308.984,168.026119 C310.733,162.817875 319.484,139.355788 322.981,133.277838 C326.488,127.199888 312.481,108.956041 312.481,108.956041 C312.481,108.956041 294.978,80.2857109 245.975,53.3547939 C196.971,26.4138803 168.967,42.9283105 168.967,42.9283105 L161.964,60.3024507 C161.964,60.3024507 138.341,64.6409874 123.46,77.6765909 C108.589,90.7121943 99.837,106.346921 98.963,115.903698 C98.088,125.460475 103.334,159.339048 105.966,164.557289 C108.589,169.765532 112.96,185.400259 112.96,185.400259 C112.96,185.400259 108.589,183.670842 105.966,188.879085 C103.334,194.097325 112.085,218.419122 112.96,220.159535 C113.834,221.897949 114.718,238.403382 119.963,237.532676 C125.218,236.663969 130.463,251.42799 130.463,251.42799 C130.463,251.42799 143.596,271.41125 144.47,275.759783 C145.344,280.09832 147.967,307.039233 147.967,307.039233 L126.967,331.36103 L102.46,355.682827 C102.459,355.682827 34.042,375.886013 5.68434189e-14,387.023257 Z" id="Path" fill="#B3BCC4"></path>
+        </g>
+    </g>
+</svg>
+`;

package/src/rendering/webgl/edge.arrowHead.ts

@@ -0,0 +1,87 @@
+/**
+ * This class extends src/rendering/webgl/programs/edge.arrowHead.ts for arrowSizeRatio support
+ */
+import SigmaEdgeArrowHeadProgram from 'sigma/rendering/webgl/programs/edge.arrowHead';
+import {floatColor} from 'sigma/utils';
+import {EdgeAttributes, NodeAttributes} from '../../types/graphDataTypes';
+
+const POINTS = 3,
+    ATTRIBUTES = 9,
+    STRIDE = POINTS * ATTRIBUTES;
+
+export default class EdgeArrowHeadProgram extends SigmaEdgeArrowHeadProgram {
+    process(
+        sourceData: NodeAttributes,
+        targetData: NodeAttributes,
+        data: EdgeAttributes,
+        hidden: boolean,
+        offset: number
+    ): void {
+        if (hidden) {
+            for (let i = offset * STRIDE, l = i + STRIDE; i < l; i++) this.array[i] = 0;
+
+            return;
+        }
+        // Our changes - added arrowSizeRatio support
+        const arrowSizeRatio = data.arrowSizeRatio || 1;
+        const thickness = data.size * arrowSizeRatio || 1,
+            radius = targetData.size || 1,
+            x1 = sourceData.x,
+            y1 = sourceData.y,
+            x2 = targetData.x,
+            y2 = targetData.y,
+            color = floatColor(data.color);
+
+        // Computing normals
+        const dx = x2 - x1,
+            dy = y2 - y1;
+
+        let len = dx * dx + dy * dy,
+            n1 = 0,
+            n2 = 0;
+
+        if (len) {
+            len = 1 / Math.sqrt(len);
+
+            n1 = -dy * len * thickness;
+            n2 = dx * len * thickness;
+        }
+
+        let i = POINTS * ATTRIBUTES * offset;
+
+        const array = this.array;
+
+        // First point
+        array[i++] = x2;
+        array[i++] = y2;
+        array[i++] = -n1;
+        array[i++] = -n2;
+        array[i++] = radius;
+        array[i++] = color;
+        array[i++] = 1;
+        array[i++] = 0;
+        array[i++] = 0;
+
+        // Second point
+        array[i++] = x2;
+        array[i++] = y2;
+        array[i++] = -n1;
+        array[i++] = -n2;
+        array[i++] = radius;
+        array[i++] = color;
+        array[i++] = 0;
+        array[i++] = 1;
+        array[i++] = 0;
+
+        // Third point
+        array[i++] = x2;
+        array[i++] = y2;
+        array[i++] = -n1;
+        array[i++] = -n2;
+        array[i++] = radius;
+        array[i++] = color;
+        array[i++] = 0;
+        array[i++] = 0;
+        array[i] = 1;
+    }
+}

package/src/rendering/webgl/edge.clamped.ts

@@ -0,0 +1,246 @@
+/**
+ * This class copies src/rendering/webgl/programs/edge.clamped.ts, but with a some difference:
+ * implemented arrowSizeRatio edge attribute, forwarded it to shaders as a_arrowSizeRatio
+ * implemented 'doubleArrow' edge type support
+ */
+
+import {floatColor, canUse32BitsIndices} from 'sigma/utils';
+import {AbstractEdgeProgram} from 'sigma/rendering/webgl/programs/common/edge';
+import fragmentShaderSource from 'sigma/rendering/webgl/shaders/edge.frag.glsl';
+import {RenderParams} from 'sigma/rendering/webgl/programs/common/program';
+
+import {vertexShaderSource} from './shaders/edge.clamped.vert.glsl';
+import {EdgeAttributes, NodeAttributes} from '../../types/graphDataTypes';
+
+const POINTS = 4,
+    ATTRIBUTES = 7,
+    STRIDE = POINTS * ATTRIBUTES;
+
+export default class EdgeClampedProgram extends AbstractEdgeProgram {
+    IndicesArray: Uint32ArrayConstructor | Uint16ArrayConstructor;
+    indicesArray: Uint32Array | Uint16Array;
+    indicesBuffer: WebGLBuffer;
+    indicesType: GLenum;
+    positionLocation: GLint;
+    colorLocation: GLint;
+    normalLocation: GLint;
+    radiusLocation: GLint;
+    arrowSizeRatioLocation: GLint; // our change
+    matrixLocation: WebGLUniformLocation;
+    sqrtZoomRatioLocation: WebGLUniformLocation;
+    correctionRatioLocation: WebGLUniformLocation;
+    canUse32BitsIndices: boolean;
+
+    constructor(gl: WebGLRenderingContext) {
+        super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES);
+
+        // Initializing indices buffer
+        const indicesBuffer = gl.createBuffer();
+        if (indicesBuffer === null) throw new Error('EdgeClampedProgram: error while getting resolutionLocation');
+        this.indicesBuffer = indicesBuffer;
+
+        // Locations:
+        this.positionLocation = gl.getAttribLocation(this.program, 'a_position');
+        this.colorLocation = gl.getAttribLocation(this.program, 'a_color');
+        this.normalLocation = gl.getAttribLocation(this.program, 'a_normal');
+        this.radiusLocation = gl.getAttribLocation(this.program, 'a_radius');
+        this.arrowSizeRatioLocation = gl.getAttribLocation(this.program, 'a_arrowSizeRatio'); // our change
+
+        // Uniform locations
+        const matrixLocation = gl.getUniformLocation(this.program, 'u_matrix');
+        if (matrixLocation === null) throw new Error('EdgeClampedProgram: error while getting matrixLocation');
+        this.matrixLocation = matrixLocation;
+
+        const sqrtZoomRatioLocation = gl.getUniformLocation(this.program, 'u_sqrtZoomRatio');
+        if (sqrtZoomRatioLocation === null)
+            throw new Error('EdgeClampedProgram: error while getting cameraRatioLocation');
+        this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
+
+        const correctionRatioLocation = gl.getUniformLocation(this.program, 'u_correctionRatio');
+        if (correctionRatioLocation === null)
+            throw new Error('EdgeClampedProgram: error while getting viewportRatioLocation');
+        this.correctionRatioLocation = correctionRatioLocation;
+
+        // Enabling the OES_element_index_uint extension
+        // NOTE: on older GPUs, this means that really large graphs won't
+        // have all their edges rendered. But it seems that the
+        // `OES_element_index_uint` is quite everywhere so we'll handle
+        // the potential issue if it really arises.
+        // NOTE: when using webgl2, the extension is enabled by default
+        this.canUse32BitsIndices = canUse32BitsIndices(gl);
+        this.IndicesArray = this.canUse32BitsIndices ? Uint32Array : Uint16Array;
+        this.indicesArray = new this.IndicesArray();
+        this.indicesType = this.canUse32BitsIndices ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
+
+        this.bind();
+    }
+
+    bind(): void {
+        const gl = this.gl;
+
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
+
+        // Bindings
+        gl.enableVertexAttribArray(this.positionLocation);
+        gl.enableVertexAttribArray(this.normalLocation);
+        gl.enableVertexAttribArray(this.colorLocation);
+        gl.enableVertexAttribArray(this.radiusLocation);
+        gl.enableVertexAttribArray(this.arrowSizeRatioLocation); // our change
+
+        gl.vertexAttribPointer(
+            this.positionLocation,
+            2,
+            gl.FLOAT,
+            false,
+            ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT,
+            0
+        );
+        gl.vertexAttribPointer(this.normalLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
+        gl.vertexAttribPointer(
+            this.colorLocation,
+            4,
+            gl.UNSIGNED_BYTE,
+            true,
+            ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT,
+            16
+        );
+        gl.vertexAttribPointer(
+            this.radiusLocation,
+            1,
+            gl.FLOAT,
+            false,
+            ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT,
+            20
+        );
+        // our change
+        gl.vertexAttribPointer(
+            this.arrowSizeRatioLocation,
+            1,
+            gl.FLOAT,
+            false,
+            ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT,
+            24
+        );
+    }
+
+    process(
+        sourceData: NodeAttributes,
+        targetData: NodeAttributes,
+        data: EdgeAttributes,
+        hidden: boolean,
+        offset: number
+    ): void {
+        if (hidden) {
+            for (let i = offset * STRIDE, l = i + STRIDE; i < l; i++) this.array[i] = 0;
+            return;
+        }
+        const arrowSizeRatio = data.arrowSizeRatio || 1; // our change
+
+        const thickness = data.size || 1,
+            x1 = sourceData.x,
+            y1 = sourceData.y,
+            x2 = targetData.x,
+            y2 = targetData.y,
+            //our change - added sourceRadius
+            sourceRadius = data.type === 'doubleArrow' ? sourceData.size || 1 : 0,
+            targetRadius = targetData.size || 1,
+            color = floatColor(data.color);
+
+        // Computing normals
+        const dx = x2 - x1,
+            dy = y2 - y1;
+
+        let len = dx * dx + dy * dy,
+            n1 = 0,
+            n2 = 0;
+
+        if (len) {
+            len = 1 / Math.sqrt(len);
+
+            n1 = -dy * len * thickness;
+            n2 = dx * len * thickness;
+        }
+
+        let i = POINTS * ATTRIBUTES * offset;
+
+        const array = this.array;
+
+        // First point
+        array[i++] = x1;
+        array[i++] = y1;
+        array[i++] = n1;
+        array[i++] = n2;
+        array[i++] = color;
+        array[i++] = -sourceRadius;
+        array[i++] = arrowSizeRatio;
+
+        // First point flipped
+        array[i++] = x1;
+        array[i++] = y1;
+        array[i++] = -n1;
+        array[i++] = -n2;
+        array[i++] = color;
+        array[i++] = sourceRadius;
+        array[i++] = arrowSizeRatio;
+
+        // Second point
+        array[i++] = x2;
+        array[i++] = y2;
+        array[i++] = n1;
+        array[i++] = n2;
+        array[i++] = color;
+        array[i++] = targetRadius;
+        array[i++] = arrowSizeRatio;
+
+        // Second point flipped
+        array[i++] = x2;
+        array[i++] = y2;
+        array[i++] = -n1;
+        array[i++] = -n2;
+        array[i++] = color;
+        array[i++] = -targetRadius;
+        array[i] = arrowSizeRatio;
+    }
+
+    computeIndices(): void {
+        const l = this.array.length / ATTRIBUTES;
+        const size = l + l / 2;
+        const indices = new this.IndicesArray(size);
+
+        for (let i = 0, c = 0; i < l; i += 4) {
+            indices[c++] = i;
+            indices[c++] = i + 1;
+            indices[c++] = i + 2;
+            indices[c++] = i + 2;
+            indices[c++] = i + 1;
+            indices[c++] = i + 3;
+        }
+
+        this.indicesArray = indices;
+    }
+
+    bufferData(): void {
+        super.bufferData();
+
+        // Indices data
+        const gl = this.gl;
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indicesArray, gl.STATIC_DRAW);
+    }
+
+    render(params: RenderParams): void {
+        if (this.hasNothingToRender()) return;
+
+        const gl = this.gl;
+
+        const program = this.program;
+        gl.useProgram(program);
+
+        // Binding uniforms
+        gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
+        gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
+        gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
+
+        // Drawing:
+        gl.drawElements(gl.TRIANGLES, this.indicesArray.length, this.indicesType, 0);
+    }
+}

package/src/rendering/webgl/edge.reversedArrowHead.ts

@@ -0,0 +1,14 @@
+import {EdgeAttributes, NodeAttributes} from '../../types/graphDataTypes';
+import EdgeArrowHeadProgram from './edge.arrowHead';
+
+export default class EdgeReversedArrowHeadProgram extends EdgeArrowHeadProgram {
+    process(
+        sourceData: NodeAttributes,
+        targetData: NodeAttributes,
+        data: EdgeAttributes,
+        hidden: boolean,
+        offset: number
+    ): void {
+        super.process(targetData, sourceData, data, hidden, offset);
+    }
+}

package/src/rendering/webgl/helpers/__tests__/imageHelper.spec.ts

@@ -0,0 +1,36 @@
+import {clearCrossOriginForCORSIfNotSameOrigin} from '../imageHelper';
+
+describe('clearCrossOriginForCORSIfNotSameOrigin tests', () => {
+    const savedLocation = window.location;
+
+    beforeEach(() => {
+        delete window.location;
+        window.location = {
+            origin: 'http://test'
+        } as Location;
+    });
+
+    afterEach(() => {
+        window.location = savedLocation;
+    });
+
+    it('should clear crossOrigin if origin is not the same', () => {
+        const img = new Image();
+        const url = 'http://imagePath/images/123.png';
+        img.crossOrigin = 'testValue';
+
+        clearCrossOriginForCORSIfNotSameOrigin(img, url);
+
+        expect(img.crossOrigin).toBe('');
+    });
+
+    it('should not clear crossOrigin if origin is the same', () => {
+        const img = new Image();
+        const url = 'http://test/images/123.png';
+        img.crossOrigin = 'testValue';
+
+        clearCrossOriginForCORSIfNotSameOrigin(img, url);
+
+        expect(img.crossOrigin).toBe('testValue');
+    });
+});