Pathfinder WaterMark

plugin.ini

[PLUGIN]
MODULES_ENABLED             =   1

[PLUGIN.MODULES]
DEMO                        =   ./app/ui/module/demo
EMPTY                       =   ./app/ui/module/empty
WATERMARK                   =   ./app/ui/module/watermark

watermark.js

define([                // dependencies for this module
    'module/base',      // abstract `parent` module class definition [required]
    'app/render'        // ... for demo purpose, we load a Render helper object
], (BaseModule, Render) => {
    'use strict';

    /**
     * WatermarkModule class
     * -> skeleton for custom module plugins
     * @type {WatermarkModule}
     */
    let WatermarkModule = class WatermarkModule extends BaseModule {
        constructor(config = {}) {
            super(Object.assign({}, new.target.defaultConfig, config));
        }

        /**
         * initial module render method
         * -> implementation is enforced by BaseModule
         * -> must return a single node element
         * @param mapId
         * @param systemData
         * @returns {HTMLElement}
         */
        render(mapId, systemData){
            this._systemData = systemData;

            // ... append your custom module body
            let bodyEl = Object.assign(document.createElement('div'), {
                className: this._config.bodyClassName
            });

            this.moduleElement.append(bodyEl);

            return this.moduleElement;
        }

        /**
         * init module
         */
        init(){
            super.init();
        }

        beforeHide(){
            super.beforeHide();
        }

        beforeDestroy(){
            super.beforeDestroy();
        }

        onSortableEvent(name, e){
            super.onSortableEvent(name, e);
        }
    };

    WatermarkModule.isPlugin = true;                            // module is defined as 'plugin'
    WatermarkModule.scope = 'system';                           // module scope controls how module gets updated and what type of data is injected
    WatermarkModule.sortArea = 'a';                             // default sortable area
    WatermarkModule.position = 15;                              // default sort/order position within sortable area
    WatermarkModule.label = 'watermark';                            // static module label (e.g. description)

    WatermarkModule.defaultConfig = {
        className: 'pf-system-watermark-module',                // class for module
        sortTargetAreas: ['a', 'b', 'c'],                   // sortable areas where module can be dragged into
        headline: 'watermark Module',
    };

    return WatermarkModule;
});


let container = document.getElementById('pf-map-tab-element');
let content = document.getElementsByClassName('hidden-xs')[0].innerHTML;
var canvas = document.createElement('canvas');

canvas.setAttribute('width', '150px');
canvas.setAttribute('height', '150px');
var ctx = canvas.getContext("2d");

ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.font = "20px oxygen-sans";
ctx.fillStyle = 'rgba(184, 184, 184, 0.1)';
ctx.rotate(Math.PI / 180 * 45);
ctx.fillText(content, 130, 0, 150);

var base64Url = canvas.toDataURL();
const watermarkDiv = document.createElement("div");
watermarkDiv.setAttribute('style', `
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    pointer-events:none;
    background-repeat:repeat;
    background-image:url('${base64Url}')`);

container.style.position = 'relative';
container.insertBefore(watermarkDiv, container.firstChild);