HuasoFoundries/ig_markerfactory

View on GitHub
src/create_grouped_icon.js

Summary

Maintainability
C
1 day
Test Coverage
/** global: google */
import { IconObject } from "./icon_object.js";

import { getColors } from "./parsers.js";
const generateGroupedCanvas = function(options) {
    let text_x,
        canvas = options.canvas || document.createElement("canvas"),
        context = canvas.getContext("2d"),
        font = options.font || "fontello",
        fontsize = options.fontsize || 26;

    canvas.width = 54;
    canvas.height = 48;
    context.clearRect(0, 0, canvas.width, canvas.height);

    let colors = getColors(options),
        color0 = colors[0];
    context.beginPath();

    context.font = "normal normal normal " + fontsize + "px " + font;

    context.textBaseline = "top";
    let textWidth = context.measureText(options.unicodelabel);
    text_x = Math.floor(canvas.width / 2 - textWidth.width / 2);

    context.shadowOffsetX = -2;
    context.shadowOffsetY = -2;
    context.shadowBlur = 0;

    context.fillStyle = "#FFFFFF";
    context.shadowColor = "#666666";

    context.fillText(options.unicodelabel, text_x - 4, 2);
    context.fillText(options.unicodelabel, text_x, 5);
    context.fillStyle = color0;
    context.fillText(options.unicodelabel, text_x + 4, 8);

    context.strokeStyle = "#FFFFFF";
    context.strokeText(options.unicodelabel, text_x + 4, 8);

    canvas.fillColor = color0;

    return canvas;
};

export function createGroupedIcon(theoptions) {
    theoptions.scale = theoptions.scale || 1;
    theoptions.fontsize = theoptions.fontsize || 26;

    let markerCanvas = generateGroupedCanvas(theoptions),
        markerOpts = {};

    let scale = theoptions.scale;

    theoptions.type = "transparent";

    Object.assign(markerOpts, theoptions);

    Object.assign(markerOpts, {
        origin: { x: 0, y: 0 },
        anchor: { x: 27 * scale, y: 24 * scale },
        size: { width: 54, height: 48 },
        scaledSize: { width: 54 * scale, height: 48 * scale }
    });

    let url = markerCanvas.toDataURL(),
        fillColor = markerCanvas.fillColor,
        iconObj = new IconObject(url, fillColor, markerOpts);

    return iconObj;
}