@reltio/graph 1.4.1585 → 1.4.1586-mui5

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

@@ -0,0 +1,13 @@
+import {Coordinates, Dimensions} from 'sigma/types';
+
+type ImageLoading = {status: 'loading'};
+type ImageError = {status: 'error'};
+type ImagePending = {status: 'pending'; image: HTMLImageElement};
+type ImageReady = {status: 'ready'} & Coordinates & Dimensions;
+export type ImageType = ImageLoading | ImageError | ImagePending | ImageReady;
+
+export const clearCrossOriginForCORSIfNotSameOrigin = (img: HTMLImageElement, url: string): void => {
+    if (new URL(url, window.location.href).origin !== window.location.origin) {
+        img.crossOrigin = '';
+    }
+};

package/src/rendering/webgl/image.ts

@@ -0,0 +1,115 @@
+import {clearCrossOriginForCORSIfNotSameOrigin, ImageType} from './helpers/imageHelper';
+
+/*
+ * ImageLoader is a part of sigma/rendering/webgl/programs/node.image
+ * It loads images in one texture, which used for all nodes.
+ */
+
+const MAX_TEXTURE_SIZE = 128;
+
+export class ImageLoader {
+    rebindTextureFns: (() => void)[] = [];
+    images: Record<string, ImageType> = {};
+    textureImage: ImageData;
+    hasReceivedImages = false;
+    pendingImagesFrameID: number | undefined = undefined;
+    constructor() {}
+
+    /**
+     * Helper to load an image:
+     */
+    loadImage = (id: string, imageSource: string): void => {
+        if (this.images[id]) return;
+
+        const image = new Image();
+        image.addEventListener('load', () => {
+            this.images[id] = {
+                status: 'pending',
+                image
+            };
+
+            if (typeof this.pendingImagesFrameID !== 'number') {
+                this.pendingImagesFrameID = requestAnimationFrame(() => this.finalizePendingImages());
+            }
+        });
+        image.addEventListener('error', () => {
+            this.images[id] = {status: 'error'};
+        });
+        this.images[id] = {status: 'loading'};
+
+        // Load image:
+        clearCrossOriginForCORSIfNotSameOrigin(image, imageSource);
+        // add ?not-from-cache parameter for loading image not from cache
+        // because cached image does not contain cors headers
+        // https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome
+        image.src = imageSource.startsWith('data:image') ? imageSource : imageSource + '?not-from-cache';
+    };
+
+    /**
+     * Helper that takes all pending images and adds them into the texture:
+     */
+    finalizePendingImages = (): void => {
+        this.pendingImagesFrameID = undefined;
+
+        const pendingImages: {image: HTMLImageElement; id: string; size: number}[] = [];
+
+        // List all pending images:
+        for (const id in this.images) {
+            const state = this.images[id];
+            if (state.status === 'pending') {
+                pendingImages.push({
+                    id,
+                    image: state.image,
+                    size: Math.min(state.image.width, state.image.height) || 1
+                });
+            }
+        }
+
+        // Add images to texture:
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+        canvas.width = pendingImages.reduce(
+            (iter, {size}) => iter + size,
+            this.hasReceivedImages ? this.textureImage.width : 0
+        );
+        canvas.height = Math.max(
+            this.hasReceivedImages ? this.textureImage.height : 0,
+            ...pendingImages.map(({size}) => size)
+        );
+
+        let xOffset = 0;
+        if (this.hasReceivedImages) {
+            ctx.putImageData(this.textureImage, 0, 0);
+            xOffset = this.textureImage.width;
+        }
+        pendingImages.forEach(({id, image, size}) => {
+            const imageSizeInTexture = Math.min(MAX_TEXTURE_SIZE, size);
+
+            // Crop image, to only keep the biggest square, centered:
+            let dx = 0,
+                dy = 0;
+            if ((image.width || 0) > (image.height || 0)) {
+                dx = (image.width - image.height) / 2;
+            } else {
+                dy = (image.height - image.width) / 2;
+            }
+            ctx.drawImage(image, dx, dy, size, size, xOffset, 0, imageSizeInTexture, imageSizeInTexture);
+
+            // Update image state:
+            this.images[id] = {
+                status: 'ready',
+                x: xOffset,
+                y: 0,
+                width: imageSizeInTexture,
+                height: imageSizeInTexture
+            };
+
+            xOffset += imageSizeInTexture;
+        });
+
+        this.textureImage = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        this.hasReceivedImages = true;
+        this.rebindTextureFns.forEach((fn) => fn());
+    };
+}

package/src/rendering/webgl/node.border.ts

@@ -0,0 +1,78 @@
+/*
+ * This class copies sigma/examples/custom-rendering/programs/node.border, but with a some
+ * difference: The fragment shader ("./node.border.frag.glsl") draws a transparent
+ * disc with a colored border. Size of border depends on inPath and highlighted props
+ */
+
+import {floatColor} from 'sigma/utils';
+import {AbstractNodeProgram} from 'sigma/rendering/webgl/programs/common/node';
+import {RenderParams} from 'sigma/rendering/webgl/programs/common/program';
+
+import {vertexShaderSource} from './shaders/node.border.vert.glsl';
+import {fragmentShaderSource} from './shaders/node.border.frag.glsl';
+import {NodeAttributes} from '../../types/graphDataTypes';
+
+const POINTS = 1; // number of vertices for a node
+const ATTRIBUTES = 5; // number of attributes for one vertex
+
+export default class NodeProgramBorder extends AbstractNodeProgram {
+    borderSize: GLint; // GL variable for border size
+    constructor(gl: WebGLRenderingContext) {
+        super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES);
+
+        // Attribute Location
+        this.borderSize = gl.getAttribLocation(this.program, 'a_borderSize');
+
+        this.bind();
+    }
+
+    bind(): void {
+        super.bind();
+
+        const gl = this.gl;
+
+        gl.enableVertexAttribArray(this.borderSize);
+        gl.vertexAttribPointer(
+            this.borderSize,
+            1,
+            gl.FLOAT,
+            false,
+            this.attributes * Float32Array.BYTES_PER_ELEMENT,
+            16
+        );
+    }
+
+    process(data: NodeAttributes, hidden: boolean, offset: number): void {
+        const array = this.array;
+        let i = offset * POINTS * ATTRIBUTES;
+
+        if (hidden || !data.inPath) {
+            // draw border only for nodes with inPath or not hidden
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            return;
+        }
+
+        array[i++] = data.x; // position of center
+        array[i++] = data.y;
+        array[i++] = data.size; // size
+        array[i++] = floatColor(data.color); // color
+        array[i] = data.highlighted ? 4 : 2; // size of border in pixels
+    }
+
+    render(params: RenderParams): void {
+        const gl = this.gl;
+
+        const program = this.program;
+        gl.useProgram(program);
+
+        gl.uniform1f(this.ratioLocation, 1 / Math.sqrt(params.ratio));
+        gl.uniform1f(this.scaleLocation, params.scalingRatio);
+        gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
+
+        gl.drawArrays(gl.POINTS, 0, this.array.length / ATTRIBUTES);
+    }
+}

package/src/rendering/webgl/node.buttons.ts

@@ -0,0 +1,241 @@
+import {vertexShaderSource} from './shaders/node.buttons.vert.glsl';
+import {fragmentShaderSource} from './shaders/node.buttons.frag.glsl';
+
+import Sigma from 'sigma/sigma';
+import {AbstractNodeProgram} from 'sigma/rendering/webgl/programs/common/node';
+import {RenderParams} from 'sigma/rendering/webgl/programs/common/program';
+import {floatColor} from 'sigma/utils';
+import {svg2Url} from '@reltio/mdm-sdk';
+import {EXPAND_ICON} from '../icons/expandIcon.inline.svg';
+import {COLLAPSE_ICON} from '../icons/collapseIcon.inline.svg';
+import {ImageLoader} from './image';
+import {NodeAttributes} from '../../types/graphDataTypes';
+
+const POINTS = 2; // number of button for 1 node
+const ATTRIBUTES = 11; // number of attributes for one button
+
+// images for buttons
+const defaultImages = [
+    {id: 'expandIcon', path: svg2Url(EXPAND_ICON)},
+    {id: 'collapseIcon', path: svg2Url(COLLAPSE_ICON)}
+];
+
+export default class NodeButtonsProgram extends AbstractNodeProgram {
+    imageLoader: ImageLoader;
+    texture: WebGLTexture;
+    textureLocation: GLint;
+    buttonSize: GLint; // buttons size
+    normals: GLint; // normals to calculate positions of buttons
+    correctionRatioLocation: WebGLUniformLocation;
+    sqrtZoomRatioLocation: WebGLUniformLocation;
+    atlasLocation: WebGLUniformLocation;
+    latestRenderParams?: RenderParams;
+
+    constructor(gl: WebGLRenderingContext, renderer: Sigma) {
+        super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES);
+
+        this.imageLoader = new ImageLoader();
+
+        this.imageLoader.rebindTextureFns.push(() => {
+            if (this && this.rebindTexture) this.rebindTexture();
+            if (renderer && renderer.refresh) renderer.refresh();
+        });
+
+        this.imageLoader.textureImage = new ImageData(1, 1);
+
+        // Attribute Location
+        this.textureLocation = gl.getAttribLocation(this.program, 'a_texture');
+        this.buttonSize = gl.getAttribLocation(this.program, 'a_buttonSize');
+        this.normals = gl.getAttribLocation(this.program, 'a_normals');
+
+        // Uniform Location
+        const correctionRatioLocation = gl.getUniformLocation(this.program, 'u_correctionRatio');
+        if (correctionRatioLocation === null)
+            throw new Error('NodeButtonsProgram: error while getting correctionRatioLocation');
+        this.correctionRatioLocation = correctionRatioLocation;
+
+        const sqrtZoomRatioLocation = gl.getUniformLocation(this.program, 'u_sqrtZoomRatio');
+        if (sqrtZoomRatioLocation === null)
+            throw new Error('NodeButtonsProgram: error while getting sqrtZoomRatioLocation');
+        this.sqrtZoomRatioLocation = sqrtZoomRatioLocation;
+
+        const atlasLocation = gl.getUniformLocation(this.program, 'u_atlas');
+        if (atlasLocation === null) throw new Error('NodeButtonsProgram: error while getting atlasLocation');
+        this.atlasLocation = atlasLocation;
+
+        // Initialize WebGL texture:
+        this.texture = gl.createTexture() as WebGLTexture;
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
+
+        defaultImages.map((image) => this.imageLoader.loadImage(image.id, image.path));
+
+        this.bind();
+    }
+
+    bind(): void {
+        super.bind();
+
+        const gl = this.gl;
+
+        gl.enableVertexAttribArray(this.buttonSize);
+        gl.enableVertexAttribArray(this.normals);
+        gl.enableVertexAttribArray(this.textureLocation);
+
+        gl.vertexAttribPointer(
+            this.buttonSize,
+            1,
+            gl.FLOAT,
+            false,
+            this.attributes * Float32Array.BYTES_PER_ELEMENT,
+            16
+        );
+        gl.vertexAttribPointer(this.normals, 2, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 20);
+        gl.vertexAttribPointer(
+            this.textureLocation,
+            4,
+            gl.FLOAT,
+            false,
+            this.attributes * Float32Array.BYTES_PER_ELEMENT,
+            28
+        );
+    }
+
+    process(data: NodeAttributes, hidden: boolean, offset: number): void {
+        const array = this.array;
+        let i = offset * POINTS * ATTRIBUTES;
+        const hideButtons = hidden || (data.inactive && !data.highlighted);
+
+        // Computing normals
+        const [dx, dy] = data.buttonOffset || [0, 0];
+
+        let len = dx * dx + dy * dy,
+            n1 = 0,
+            n2 = 0;
+
+        if (len) {
+            len = 1 / Math.sqrt(len);
+
+            n1 = dy * len;
+            n2 = dx * len;
+        }
+
+        // Expand button
+
+        if (hideButtons || !data.showExpand) {
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            // Texture:
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+        } else {
+            const expandImageState = this.imageLoader.images['expandIcon'];
+
+            array[i++] = data.x; // position of center
+            array[i++] = data.y;
+            array[i++] = data.size; // size
+            array[i++] = floatColor(data.color); // color
+            array[i++] = data.buttonSize || 0; // button radius
+            array[i++] = n1; // normals
+            array[i++] = -n2;
+
+            // Reference texture:
+            if (expandImageState && expandImageState.status === 'ready') {
+                const {width, height} = this.imageLoader.textureImage;
+                array[i++] = expandImageState.x / width;
+                array[i++] = expandImageState.y / height;
+                array[i++] = expandImageState.width / width;
+                array[i++] = expandImageState.height / height;
+            } else {
+                array[i++] = 0;
+                array[i++] = 0;
+                array[i++] = 0;
+                array[i++] = 0;
+            }
+        }
+
+        // Collapse button
+
+        // don't show button
+        if (hideButtons || !data.showCollapse) {
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            // Texture:
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+        } else {
+            const collapseImageState = this.imageLoader.images['collapseIcon'];
+
+            array[i++] = data.x; // position of center
+            array[i++] = data.y;
+            array[i++] = data.size; // size
+            array[i++] = floatColor(data.color); // color
+            array[i++] = data.buttonSize || 0; // button radius
+            array[i++] = -n1; // normals
+            array[i++] = -n2;
+
+            // Reference texture:
+            if (collapseImageState && collapseImageState.status === 'ready') {
+                const {width, height} = this.imageLoader.textureImage;
+                array[i++] = collapseImageState.x / width;
+                array[i++] = collapseImageState.y / height;
+                array[i++] = collapseImageState.width / width;
+                array[i++] = collapseImageState.height / height;
+            } else {
+                array[i++] = 0;
+                array[i++] = 0;
+                array[i++] = 0;
+                array[i++] = 0;
+            }
+        }
+    }
+
+    render(params: RenderParams): void {
+        if (this.hasNothingToRender()) return;
+
+        this.latestRenderParams = params;
+
+        const gl = this.gl;
+
+        const program = this.program;
+        gl.useProgram(program);
+
+        gl.uniform1f(this.ratioLocation, 1 / Math.sqrt(params.ratio));
+        gl.uniform1f(this.scaleLocation, params.scalingRatio);
+        gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
+        gl.uniform1f(this.sqrtZoomRatioLocation, Math.sqrt(params.ratio));
+        gl.uniform1f(this.correctionRatioLocation, params.correctionRatio);
+        gl.uniform1i(this.atlasLocation, 1);
+
+        gl.drawArrays(gl.POINTS, 0, this.array.length / ATTRIBUTES);
+    }
+
+    rebindTexture() {
+        const gl = this.gl;
+
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.imageLoader.textureImage);
+        gl.generateMipmap(gl.TEXTURE_2D);
+
+        if (this.latestRenderParams) {
+            this.bind();
+            this.bufferData();
+            this.render(this.latestRenderParams);
+        }
+    }
+}

package/src/rendering/webgl/node.image.ts

@@ -0,0 +1,169 @@
+/*
+ * This class copies sigma/rendering/webgl/programs/node.image, but with a some
+ * difference: it can change color of picture for inactive state
+ * Program rendering nodes using GL_POINTS, but that draws an image on top of
+ * the classic colored disc.
+ */
+import {vertexShaderSource} from './shaders/node.image.vert.glsl';
+import {fragmentShaderSource} from './shaders/node.image.frag.glsl';
+
+import {AbstractNodeProgram} from 'sigma/rendering/webgl/programs/common/node';
+import {RenderParams} from 'sigma/rendering/webgl/programs/common/program';
+import Sigma from 'sigma/sigma';
+import {floatColor} from 'sigma/utils';
+import {svg2Url} from '@reltio/mdm-sdk';
+import {DEFAULT_PROFILE_IMAGE} from '../icons/no_photo.inline.svg';
+import {ImageLoader} from './image';
+import {NodeAttributes} from '../../types/graphDataTypes';
+
+const POINTS = 1;
+const ATTRIBUTES = 9;
+
+const defaultImage = {id: 'defaultImage', path: svg2Url(DEFAULT_PROFILE_IMAGE)};
+
+/*
+ * To share the texture between the program instances of the graph and the
+ * hovered nodes (to prevent some flickering, mostly), this program must be
+ * "built" for each sigma instance:
+ */
+export default class NodeImageProgram extends AbstractNodeProgram {
+    imageLoader: ImageLoader;
+    texture: WebGLTexture;
+    textureLocation: GLint;
+    atlasLocation: WebGLUniformLocation;
+    latestRenderParams?: RenderParams;
+    inactive: GLint;
+
+    constructor(gl: WebGLRenderingContext, renderer: Sigma) {
+        super(gl, vertexShaderSource, fragmentShaderSource, POINTS, ATTRIBUTES);
+
+        this.imageLoader = new ImageLoader();
+
+        this.imageLoader.rebindTextureFns.push(() => {
+            if (this && this.rebindTexture) this.rebindTexture();
+            if (renderer && renderer.refresh) renderer.refresh();
+        });
+
+        this.imageLoader.textureImage = new ImageData(1, 1);
+
+        // Attribute Location
+        this.textureLocation = gl.getAttribLocation(this.program, 'a_texture');
+        this.inactive = gl.getAttribLocation(this.program, 'a_inactive');
+
+        // Uniform Location
+        const atlasLocation = gl.getUniformLocation(this.program, 'u_atlas');
+        if (atlasLocation === null) throw new Error('NodeProgramImage: error while getting atlasLocation');
+        this.atlasLocation = atlasLocation;
+
+        // Initialize WebGL texture:
+        this.texture = gl.createTexture() as WebGLTexture;
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
+
+        this.imageLoader.loadImage(defaultImage.id, defaultImage.path);
+
+        this.bind();
+    }
+
+    bind(): void {
+        super.bind();
+
+        const gl = this.gl;
+
+        gl.enableVertexAttribArray(this.textureLocation);
+        gl.enableVertexAttribArray(this.inactive);
+
+        gl.vertexAttribPointer(this.inactive, 1, gl.FLOAT, false, this.attributes * Float32Array.BYTES_PER_ELEMENT, 16);
+
+        gl.vertexAttribPointer(
+            this.textureLocation,
+            4,
+            gl.FLOAT,
+            false,
+            this.attributes * Float32Array.BYTES_PER_ELEMENT,
+            20
+        );
+    }
+
+    process(data: NodeAttributes, hidden: boolean, offset: number): void {
+        const array = this.array;
+        let i = offset * POINTS * ATTRIBUTES;
+
+        const imageSource = data.image;
+        let imageState = imageSource && this.imageLoader.images[imageSource];
+        if (typeof imageSource === 'string' && !imageState) {
+            this.imageLoader.loadImage(imageSource, imageSource);
+        }
+
+        if (hidden) {
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            // Texture:
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            return;
+        }
+
+        array[i++] = data.x; // position of center
+        array[i++] = data.y;
+        array[i++] = data.size; // size
+        array[i++] = floatColor(data.color); // color
+        array[i++] = data.inactive ? 1 : 0; // inactive property
+
+        // Reference texture:
+        if (!imageState || imageState.status !== 'ready') {
+            imageState = this.imageLoader.images[defaultImage.id];
+        }
+
+        if (imageState && imageState.status === 'ready') {
+            const {width, height} = this.imageLoader.textureImage;
+            array[i++] = imageState.x / width;
+            array[i++] = imageState.y / height;
+            array[i++] = imageState.width / width;
+            array[i++] = imageState.height / height;
+        } else {
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+            array[i++] = 0;
+        }
+    }
+
+    render(params: RenderParams): void {
+        if (this.hasNothingToRender()) return;
+
+        this.latestRenderParams = params;
+
+        const gl = this.gl;
+
+        const program = this.program;
+        gl.useProgram(program);
+
+        gl.uniform1f(this.ratioLocation, 1 / Math.sqrt(params.ratio));
+        gl.uniform1f(this.scaleLocation, params.scalingRatio);
+        gl.uniformMatrix3fv(this.matrixLocation, false, params.matrix);
+        gl.uniform1i(this.atlasLocation, 0);
+
+        gl.drawArrays(gl.POINTS, 0, this.array.length / ATTRIBUTES);
+    }
+
+    rebindTexture() {
+        const gl = this.gl;
+
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.imageLoader.textureImage);
+        gl.generateMipmap(gl.TEXTURE_2D);
+
+        if (this.latestRenderParams) {
+            this.bind();
+            this.bufferData();
+            this.render(this.latestRenderParams);
+        }
+    }
+}

package/src/rendering/webgl/shaders/edge.clamped.vert.glsl.ts

@@ -0,0 +1,55 @@
+/*
+ * This file copies sigma/src/rendering/webgl/shaders/edge.clamped.vert.glsl, but with a some
+ * difference: added calculation of arrowSizeCoefficient using a_arrowSizeRatio attribute
+ */
+
+export const vertexShaderSource = `
+attribute vec4 a_color;
+attribute vec2 a_normal;
+attribute vec2 a_position;
+attribute float a_radius;
+attribute float a_arrowSizeRatio;
+
+uniform mat3 u_matrix;
+uniform float u_sqrtZoomRatio;
+uniform float u_correctionRatio;
+
+varying vec4 v_color;
+varying vec2 v_normal;
+varying float v_thickness;
+
+const float minThickness = 1.7;
+const float bias = 255.0 / 254.0;
+const float arrowHeadLengthThicknessRatio = 2.5;
+
+void main() {
+  float normalLength = length(a_normal);
+  vec2 unitNormal = a_normal / normalLength;
+
+  // These first computations are taken from edge.vert.glsl. Please read it to
+  // get better comments on what's happening:
+  float pixelsThickness = max(normalLength, minThickness * u_sqrtZoomRatio);
+  float webGLThickness = pixelsThickness * u_correctionRatio;
+  float adaptedWebGLThickness = webGLThickness * u_sqrtZoomRatio;
+
+  // our change - apply a_arrowSizeRatio depending on current zoom and minThickness
+  float arrowSizeCoefficient = min(a_arrowSizeRatio, a_arrowSizeRatio / (u_sqrtZoomRatio * minThickness));
+
+  // Here, we move the point to leave space for the arrow head:
+  float direction = sign(a_radius);
+  float adaptedWebGLNodeRadius = direction * a_radius * 2.0 * u_correctionRatio * u_sqrtZoomRatio;
+
+  float adaptedWebGLArrowHeadLength = adaptedWebGLThickness * 2.0 * arrowHeadLengthThicknessRatio * arrowSizeCoefficient;
+
+
+  vec2 compensationVector = vec2(-direction * unitNormal.y, direction * unitNormal.x) * (adaptedWebGLNodeRadius + adaptedWebGLArrowHeadLength);
+
+  // Here is the proper position of the vertex
+  gl_Position = vec4((u_matrix * vec3(a_position + unitNormal * adaptedWebGLThickness + compensationVector, 1)).xy, 0, 1);
+
+  v_thickness = webGLThickness / u_sqrtZoomRatio;
+
+  v_normal = unitNormal;
+  v_color = a_color;
+  v_color.a *= bias;
+}`;