// Import the Lasal Runtime base element into your component
// Import SigPolymer to use Polymer methods: html, afterNextRender, beforeNextRender, debouncer, timeOut
// or if your component's getter template() returns a HTML literal
import { LasalRuntimeSigElement, SigPolymer } from '../../sigmatek/sig-element/sig-element.js';
//ColorpickerBase with functionality shared by all colorpickers
import LasalRuntimeSigControlColorpickerBase from './sig-control-colorpicker-base.js';

/****************************************************************************************************
 * @class LasalRuntimeSigControlColorpickerCircle
 * @extends {LasalRuntimeSigControlColorpickerBase}
 ****************************************************************************************************/
export class LasalRuntimeSigControlColorpickerCircle extends LasalRuntimeSigControlColorpickerBase {
    /****************************************************************************************************
     * When the element is loaded, importMeta() assigns reference to the path from 
     * which an element was imported to its importPath property. 
     * Relative URLs in styles are automatically re-written to be relative to the importPath property. 
     * You can use [[importPath]] in your component to load url resources
     * 
     * @readonly
     * @static
     ****************************************************************************************************/
    static get importMeta() {
        return import.meta;
    }

    /****************************************************************************************************
     * Return the component style and template as a template literal
     *
     * @readonly
     * @static
     ****************************************************************************************************/
    static get template() {
        return SigPolymer.html`
        <style include="sig-element-css">
            :host {
                /* Basic styling of the component */
                color: var(--theme-sig-control-colorpicker-circle-color, inherit);
                background-color: var(--theme-sig-control-colorpicker-circle-background-color, transparent);
                border-width: var(--theme-sig-control-colorpicker-circle-border-width, inherit);
                border-color: var(--theme-sig-control-colorpicker-circle-border-color, inherit);
                border-style: var(--theme-sig-control-colorpicker-circle-border-style, none);
                border-radius: var(--theme-sig-control-colorpicker-circle-border-radius, none);

                /* Basic box model settings */
                display: block;
                position: absolute;
                overflow: initial;

                height: auto;
                width: auto;

                z-index: 7;
            }

            :host * {
                /* Reset margin and paddings for child elements and turn of text selection */
                @apply --notextselect;
                margin: 0;
                padding: 0;
            }

            .clearfix:after {
                @apply --clearfix
            }

            .sig-control-colorpicker-circle {
                box-sizing: border-box;
                height: 100%;
                width: 100%;
                position: relative;
                border-width: var(--theme-sig-control-colorpicker-picker-border-width, 0px);
                border-style: var(--theme-sig-control-colorpicker-picker-border-style, none);
                border-color: var(--theme-sig-control-colorpicker-picker-border-color, transparent);
                border-radius: var(--theme-sig-control-colorpicker-picker-border-radius, 3px);
                background-color: var(--theme-sig-control-colorpicker-picker-background-color, rgba(255,255,255,1));
                padding-left: 10px;
                padding-right: 10px;
            }

            #colorSelectArea {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
                margin: auto;
            }

            .color {
                height: 30px;
                width: 50px;
                box-sizing: border-box;
                border: 1px solid black;
                margin: 1px
            }

            sig-control-input,
            sig-control-button {
                --theme-sig-element-top: 0;
                --theme-sig-element-left: 0;
                display: inline-block;
                position: relative;
                /* width: 50px;
                height: 20px; */

            }

            sig-control-input {
                --theme-sig-element-height: var(--theme-sig-control-colorpicker-picker-input-height, 35px);
                --theme-sig-element-width: var(--theme-sig-control-colorpicker-picker-input-width, 80px);
                --theme-sig-control-input-background-color: var(--theme-sig-control-colorpicker-picker-input-background-color, rgba(255, 255, 255, 1));
                /*--theme-sig-control-input-value-background-color: var(--theme-sig-control-colorpicker-picker-input-value-background-color, rgba(215, 215, 215, 1));*/
                --theme-sig-control-input-value-active-color: var(--theme-sig-control-colorpicker-picker-input-value-active-color, rgba(40,50,45,1));
                --theme-sig-control-input-value-active-background-color: var(--theme-sig-control-colorpicker-picker-input-value-active-background-color, rgba(174, 200, 26, 1));
                --theme-sig-control-input-color: var(--theme-sig-control-colorpicker-picker-input-color, rgba(40,50, 45, 1));
                --theme-sig-control-input-border-color: var(--theme-sig-control-colorpicker-picker-input-border-color, rgba(40,50,45, 1));
                --theme-sig-control-input-border-width: var(--theme-sig-control-colorpicker-picker-input-border-width, 1px);
                --theme-sig-control-input-border-style: var(--theme-sig-control-colorpicker-picker-input-border-style, solid);
                --theme-sig-control-input-background-color-direction: var(--theme-sig-control-colorpicker-picker-input-background-color-direction, to bottom);
                --theme-sig-control-input-value-active-background-color-stop: var(--theme-sig-control-colorpicker-picker-input-value-active-background-color-stop
                    /* , rgba(174, 200, 26, 1) */
                    );
                --theme-sig-control-input-active-background-color-direction: var(--theme-sig-control-colorpicker-picker-input-active-background-color-direction, to bottom);
                --theme-sig-control-input-border-radius: var(--theme-sig-control-colorpicker-picker-input-border-radius, 3px);
                --theme-sig-control-input-border-color-direction: var(--theme-sig-control-colorpicker-picker-input-border-color-direction, to bottom);
                --theme-sig-control-input-shadow-size: var(--theme-sig-control-colorpicker-picker-input-shadow-size, 0px);
                --theme-sig-control-input-activ-border-color: var(--theme-sig-control-colorpicker-picker-input-activ-border-color
                    /* , inherit */
                    );
                --theme-sig-control-input-activ-border-color-direction: var(--theme-sig-control-colorpicker-picker-input-activ-border-color-direction, to bottom);
                --theme-sig-control-input-pressed-shadow-size: var(--theme-sig-control-colorpicker-picker-input-pressed-shadow-size, 0px);
                --theme-sig-control-input-value-text-align: var(--theme-sig-control-colorpicker-picker-input-value-text-align, center);
                --theme-sig-control-input-margin-leftright: var(--theme-sig-control-colorpicker-picker-input-margin-leftright, 0px);
                --theme-sig-control-input-margin-top: var(--theme-sig-control-colorpicker-picker-input-margin-top, 5px);
                --theme-sig-control-input-unit-text-align: var(--theme-sig-control-colorpicker-picker-input-unit-text-align, center);
                --theme-sig-control-input-unit-margin-leftright: var(--theme-sig-control-colorpicker-picker-input-unit-margin-leftright, 0px);
                --theme-sig-control-input-unit-margin-bottom: var(--theme-sig-control-colorpicker-picker-input-unit-margin-bottom, 5px);
                --theme-sig-control-input-unit-text-size: var(--theme-sig-control-colorpicker-picker-input-unit-text-size, inherit);
                --theme-sig-control-input-unit-color: var(--theme-sig-control-colorpicker-picker-input-unit-color, inherit);
            }
            #hexcontainer sig-control-input {
                --theme-sig-element-width: var(--theme-sig-control-colorpicker-picker-hex-input-width, var(--theme-sig-control-colorpicker-picker-input-width, 80px));
            }

            #colorpickermarker1 {
                position: absolute;
                box-sizing: border-box;
                background-color: blue;
                top: 0;
                left: 0;
                transform: translate3d(calc(0px - 50%), 0, 0);
                width: var(--theme-sig-control-colorpicker-circle-marker-width, 20px);
                height: var(--theme-sig-control-colorpicker-circle-marker-height, 20px);
                border: 1px solid black;
                border-radius: var(--theme-sig-control-colorpicker-picker-marker-border-radius, 999px);
            }

            #colorSelectArea {
                position: relative;
            }

            #canvas {
                position: absolute;
            }

            .hidden {
                display: none;
            }

            sig-control-button {
                margin-right: var(--theme-sig-control-colorpicker-picker-button-spacing, 10px) !important;
                --theme-sig-element-height: var(--theme-sig-control-colorpicker-picker-button-height, 50px);
                --theme-sig-element-width: var(--theme-sig-control-colorpicker-picker-button-width, 100px);
                --theme-sig-control-button-color: var(--theme-sig-control-colorpicker-picker-button-color, rgba(255, 255, 255, 1));
                --theme-sig-control-button-background-color: var(--theme-sig-control-colorpicker-picker-button-background-color, rgba(40, 50, 45, 1));
                --theme-sig-control-button-border-color: var(--theme-sig-control-colorpicker-picker-button-border-color, transparent);
                --theme-sig-control-button-border-width: var(--theme-sig-control-colorpicker-picker-button-border-width, 0px);
                --theme-sig-control-button-border-radius: var(--theme-sig-control-colorpicker-picker-button-border-radius, 3px);
                --theme-sig-control-button-border-style: var(--theme-sig-control-colorpicker-picker-button-border-style, none);
                --theme-sig-control-button-pressed-background-color: var(--theme-sig-control-colorpicker-picker-button-pressed-background-color, rgba(174, 200, 26, 1));
                --theme-sig-control-button-pressed-color: var(--theme-sig-control-colorpicker-picker-button-pressed-color, rgba(255, 255, 255, 1));
                --theme-sig-control-button-background-color-direction: var(--theme-sig-control-colorpicker-picker-button-background-color-direction, to bottom);
                --theme-sig-control-button-border-color-direction: var(--theme-sig-control-colorpicker-picker-button-border-color-direction, to bottom);
                --theme-sig-control-button-shadow-size: var(--theme-sig-control-colorpicker-picker-button-shadow-size, 0px);
                --theme-sig-control-button-text-align: var(--theme-sig-control-colorpicker-picker-button-text-align, center);
                --theme-sig-control-button-vertical-align: var(--theme-sig-control-colorpicker-picker-button-vertical-align, middle);
                --theme-sig-control-button-background-image: var(--theme-sig-control-colorpicker-picker-button-background-image, none);
                --theme-sig-control-button-background-repeat: var(--theme-sig-control-colorpicker-picker-button-background-repeat, no-repeat);
                --theme-sig-control-button-background-position-x: var(--theme-sig-control-colorpicker-picker-button-background-position-x, center);
                --theme-sig-control-button-background-position-y: var(--theme-sig-control-colorpicker-picker-button-background-position-y, center);
                --theme-sig-control-button-background-size: var(--theme-sig-control-colorpicker-picker-button-background-size, cover);
                --theme-sig-control-button-pressed-background-color-direction: var(--theme-sig-control-colorpicker-picker-button-pressed-background-color-direction, to bottom);
                --theme-sig-control-button-pressed-background-image: var(--theme-sig-control-colorpicker-picker-button-pressed-background-image, inherit);
                --theme-sig-control-button-pressed-border-color-direction: var(--theme-sig-control-colorpicker-picker-button-pressed-border-color-direction, to bottom);
                --theme-sig-control-button-pressed-shadow-size: var(--theme-sig-control-colorpicker-picker-button-pressed-shadow-size, 0px);
                --theme-sig-control-led-width: 10px;
                --theme-sig-control-led-height: 10px;
                --theme-sig-control-button-led-border-width: var(--theme-sig-control-colorpicker-picker-button-led-border-width, 1px);
                --theme-sig-control-button-led-border-color: var(--theme-sig-control-colorpicker-picker-button-led-border-color, rgba(0, 0, 0, 0));
                --theme-sig-control-button-led-border-radius: var(--theme-sig-control-colorpicker-picker-button-led-border-radius, 5px);
                --theme-sig-control-button-led-background-color: var(--theme-sig-control-colorpicker-picker-button-led-background-color, #ccc);
                --theme-sig-control-button-led-background-image: var(--theme-sig-control-colorpicker-picker-button-led-background-image, none);
                --theme-sig-control-button-led-pressed-background-color: var(--theme-sig-control-colorpicker-picker-button-led-pressed-background-color, #070);
                --theme-sig-control-button-led-pressed-background-image: var(--theme-sig-control-colorpicker-picker-button-led-pressed-background-image, none);
                --theme-sig-control-button-led-background-size: var(--theme-sig-control-colorpicker-picker-button-led-background-size, cover);
                --theme-sig-control-button-led-background-repeat: var(--theme-sig-control-colorpicker-picker-button-led-background-repeat, no-repeat);
                --theme-sig-control-button-led-margin-height: var(--theme-sig-control-colorpicker-picker-button-led-margin-height, 3px);
                --theme-sig-control-button-led-margin-width: var(--theme-sig-control-colorpicker-picker-button-led-margin-width, 3px);
            }

            sig-control-button:last-child {
                margin-right: 0 !important;
            }

            .table-cell label {
                color: var(--theme-sig-control-colorpicker-picker-label-color, rgba(40, 50, 45, 1));
                margin-right: var(--theme-sig-control-colorpicker-picker-label-margin, 5px);
            }

            .table-cell {
                box-sizing: border-box;
                display: inline-flex;
                width: 33%;
                justify-content: flex-end;
                align-items: center;
            }
            #hexcontainer .table-cell {
                width:100%;
            }

            #canvasContainer {
                position: relative;
                width: 100%;
                top: 50%;
                transform: translateY(-50%);
            }

            #controlButtons {
                white-space: nowrap;
            }

            #colorinputs {
                margin-bottom: var(--theme-sig-control-colorpicler-picker-colorinputs-margin-bottom, 10px);
            }

            #rgbcontainer,
            #hexcontainer, 
            #hslcontainer {
                white-space: nowrap;
                display: flex;
                justify-content: flex-end;
            }
        </style>
        <div class="sig-control-colorpicker-circle clearfix">
            <div id="colorSelectArea"></div>
            <div id="colorinputs">
                <div id="rgbcontainer">
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="rgbred" type="numeric" limit-low="0" limit-high="255"></sig-control-input>
                    </div>
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="rgbgreen" type="numeric" limit-low="0" limit-high="255"></sig-control-input>
                    </div>
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="rgbblue" type="numeric" limit-low="0" limit-high="255"></sig-control-input>
                    </div>
                </div>
                <div id="hslcontainer">
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="hslhue"  type="numeric" limit-low="0" limit-high="360"></sig-control-input>
                    </div>
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="hslsaturation" type="numeric" limit-low="0" limit-high="1"></sig-control-input>
                    </div>
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="hslvalue" type="numeric" limit-low="0" limit-high="1"></sig-control-input>
                    </div>
                </div>
                <div id="hexcontainer">
                    <div class="table-cell">
                        <label></label>
                        <sig-control-input id="hex" type="hex" limit-low="0" limit-high="255"></sig-control-input>
                    </div>
                </div>
            </div>
            <div id="controlButtons">
                <sig-control-button id="OK"></sig-control-button>
                <sig-control-button id="CANCEL"></sig-control-button>
                <sig-control-button id="SHOWCOLORINPUTS"></sig-control-button>
            </div>
        </div>
        `;
    }

    /****************************************************************************************************
     * define the custom tag name
     *
     * @readonly
     * @static
     ****************************************************************************************************/
    static get is() {
        return "sig-control-colorpicker-circle";
    }
   
    /****************************************************************************************************
     * Called when the element has been created,
     * but before property values are set and local DOM is initialized.
     *Creates an instance of LasalRuntimeSigControlColorpickerCircle.
     ****************************************************************************************************/
    constructor() {
        super();
        this.grid = null;
        this.colorinputs = null;
        this.busy = false;
        this.parent = null;
        this.canvasContext = null;
        this.marker = null;
        this.mousedown = false;

        this.queue = [];
        this.queueBusy = false;


        this.colormap = [];
        this.colorhash = {};

        this.options = {};
    }

    /****************************************************************************************************
     * Fills the Grid with colors
     ****************************************************************************************************/
    _buildColorSelectArea() {

        const areaContainer = this.$.colorSelectArea;
        //Make sure areaContainer is empty
        areaContainer.innerHTML = '';


        // const controlBounds = this.getControlBounds();
        //Set the dimensions of the areaContainer
        areaContainer.style.height = this._calculateHeightForColorSelectArea() + 'px';
        areaContainer.style.width = Math.max(this.options.trackwidth, this.markerwidth) + 'px';
        areaContainer.style.paddingTop = `${this.options.areapaddingtop}px`;
        areaContainer.style.paddingBottom = `${this.options.areapaddingbottom}px`;
        // Since it should be a circle the height and widht should be equal
        // So we get both dimensions, and set the height and width to the minimum of those
        const canvasdimension1 = this._calculateHeightForColorSelectArea();
        const canvasdimension2 = Math.max(this.options.trackwidth, this.markerwidth);
        const canvasSize = Math.min(canvasdimension1, canvasdimension2);
        this.canvasheight = canvasSize;
        this.canvaswidth = canvasSize;
        // Get the colors
        this.colors = this.options.colors;
        // Since the APIs dont work in the design mode,
        // the colors are set to black/white to be able to preview the dropdown
        if (this.isdesignmode) {
            this.colors = ['rgba(0,0,0,1)', 'rgba(255,255,255,1)'];
        }
        // Add first color at end to make circle look better
        this.colors.push(this.colors[0]);
        let stepSize = 1 / (this.colors.length - 1);

        const canvas = this._createElement('canvas', 'canvas', [], {
            height: this.canvasheight,
            width: this.canvaswidth
        })

        // gradientCanvas is a canvas with width 360, and a
        // gradient with all the colors;
        // the _drawDisc method needs a color for each ° so that is what is used there
        const gradientCanvas = document.createElement('canvas');
        gradientCanvas.height = 1;
        gradientCanvas.width = 360;

        const gradientCanvasContext = gradientCanvas.getContext('2d');

        let canvasGradient = gradientCanvasContext.createLinearGradient(0, 0, 360, 0);
        let currColorStop = 0;
        for (let i = 0; i < this.colors.length; i++) {
            canvasGradient.addColorStop('' + (i * stepSize), this.colors[i]);
        }
        gradientCanvasContext.fillStyle = canvasGradient;
        gradientCanvasContext.fillRect(0, 0, 360, 1);

        const contextImageData = gradientCanvasContext.getImageData(0, 0, 360, 1).data;
        const contextImageDataArray = Array.from(contextImageData);

        // The gradientArray is an array of values that represent the image data
        // its format is [r,b,g,a,r,g,b,a,...]
        // now it needs to be split into useable values
        // [[r,g,b,a], [r,g,b,a]]
        this.gradientArray = contextImageDataArray.reduce((acc, val, idx) => {
            // If we don't have an accumulator, initialize it
            if (!acc) {
                acc = [[]];
            }
            
            // If the index is divisible by 4
            // - that means that a whole rgba cycle is passed -
            // add a new entry to the array
            if (idx % 4 === 0) {
                acc[acc.length] = [];
            }


            acc[acc.length - 1].push(val)
            return acc;
        }, []);

        // Draw the disc on the canvas
        this._drawDisk( // hsl color wheel with white center
            canvas.getContext("2d"),
            [canvas.width / 2, canvas.height / 2],
            [canvas.width / 2 - 1, canvas.height / 2 - 1],
            360,
            function (ctx, angle) {
                // Fills the circlesegment (from ctx) with a color gradient
                var gradient = ctx.createRadialGradient(1, 1, 1, 1, 1, 0);
                gradient.addColorStop(0, `rgba(${this.gradientArray[angle % 360].join(',')})`);
                gradient.addColorStop(1, "#FFFFFF");

                ctx.fillStyle = gradient;
                ctx.fill();
            }.bind(this)
        );

        // Set the canvasContext because it is needed elsewhere
        this.canvasContext = canvas.getContext('2d');

        // Create the Marker
        this.marker = this._createElement('div', 'colorpickermarker1');
        this.marker.style.width = this.options.markerwidth + 'px';
        this.marker.style.height = this.options.markerheight + 'px';
        
        //  Create the canvasContainer
        //  Needed to position the canvas without messing with
        //  the event offsets that are needed to set the marker/color correctly
        const canvasContainer = this._createElement('div', 'canvasContainer', [], {}, [canvas, this.marker])
        canvasContainer.style.width = this.canvaswidth + 'px';
        
        //   Since the canvasContainer is created here,
        //   the eventlisteners can only be added now
        this.sigAddEventListener('down', (e) => {
            this._convertGestureEventCoordsToUseableCoords(e);
            this.pointerDownHandler(e)
        }, 'polymerEvent', canvasContainer);
        this.sigAddEventListener('up', (e) => {
            this._convertGestureEventCoordsToUseableCoords(e);
            this.pointerUpHandler(e);
        }, 'polymerEvent', canvasContainer);
        this.sigAddEventListener('track', (e) => {
            this._convertGestureEventCoordsToUseableCoords(e);
            this.pointerMoveHandler(e);
        }, 'polymerEvent', canvasContainer);

        areaContainer.appendChild(canvasContainer);

        return areaContainer;


    }

    /****************************************************************************************************
     * Sig element function
     ****************************************************************************************************/
    connectedCallback() {
        super.connectedCallback();
        const canvasContainer = this.$.colorSelectArea.querySelector('#canvasContainer');
        if (!this.isdesignmode && canvasContainer) {
            this.sigAddEventListener('down', (e) => {
                this._convertGestureEventCoordsToUseableCoords(e);
                this.pointerDownHandler(e)
            }, 'polymerEvent', canvasContainer);
            this.sigAddEventListener('up', (e) => {
                this._convertGestureEventCoordsToUseableCoords(e);
                this.pointerUpHandler(e);
            }, 'polymerEvent', canvasContainer);
            this.sigAddEventListener('track', (e) => {
                this._convertGestureEventCoordsToUseableCoords(e);
                this.pointerMoveHandler(e);
            }, 'polymerEvent', canvasContainer);
        }
    }

    /****************************************************************************************************
     * Draws a disk on a canvas
     * https://github.com/PitPik/colorPicker
     * https://github.com/PitPik/colorPicker/blob/master/LICENSE.md
     * @param {*} ctx
     * @param {*} coords
     * @param {*} radius
     * @param {*} steps
     * @param {*} colorCallback
     ****************************************************************************************************/
    _drawDisk(ctx, coords, radius, steps, colorCallback) {
        var x = coords[0] || coords, // coordinate on x-axis
            y = coords[1] || coords, // coordinate on y-axis
            a = radius[0] || radius, // radius on x-axis
            b = radius[1] || radius, // radius on y-axis
            angle = 360,
            rotate = 0, coef = Math.PI / 180;

        ctx.save();
        ctx.translate(x - a, y - b);
        ctx.scale(a, b);

        // The step size; in our case 1
        steps = (angle / steps) || 360;

        // For each step (each °) draw a part of the disc
        for (; angle > 0; angle -= steps) {

            ctx.beginPath();
            if (steps !== 360) {
                ctx.moveTo(1, 1); // stroke
            }

            // Creates the circle segment
            ctx.arc(1, 1, 1,
                (angle - (steps / 2) - 1) * coef,
                (angle + (steps / 2) + 1) * coef);

            // Fills the circle segment
            if (colorCallback) {
                colorCallback(ctx, angle);
            } else {
                ctx.fillStyle = 'black';
                ctx.fill();
            }
        }
        ctx.restore();
    }

    /****************************************************************************************************
     * Draws a circle on a canvas
     * https://github.com/PitPik/colorPicker
     * https://github.com/PitPik/colorPicker/blob/master/LICENSE.md
     * @param {*} ctx
     * @param {*} coords
     * @param {*} radius
     * @param {*} color
     * @param {*} width
     ****************************************************************************************************/
    _drawCircle(ctx, coords, radius, color, width) { // uses drawDisk
        width = width || 1;
        radius = [
            (radius[0] || radius) - width / 2,
            (radius[1] || radius) - width / 2
        ];
        drawDisk(ctx, coords, radius, 1, function (ctx, angle) {
            ctx.restore();
            ctx.lineWidth = width;
            ctx.strokeStyle = color || '#000';
            ctx.stroke();
        });
    };

    /****************************************************************************************************
     * Sets the marker position to the offsetX and offsetY from the event
     * updates the inputs
     * @param {*} e
     * @returns
     ****************************************************************************************************/
    _setColor(e) {
        if (!this.canvasContext) {
            return;
        }
        
        // Get Pos
        let pos = {};
        let x = e.offsetX;
        let y = e.offsetY

        pos.x = String(x);
        pos.y = String(y);

        //The radius of the canvas
        const x0 = this.canvaswidth / 2;
        const y0 = this.canvasheight / 2;
        //The distance from mid
        const dx = pos.x - x0;
        const dy = pos.y - y0;

        const distanceFromMid = Math.sqrt(dx * dx + dy * dy);
        //If the distance is greate than the radius -> return
        if (distanceFromMid >= (x0 - 1)) {
            return;
        }
        if (pos.x > Number(this.canvaswidth) || pos.x < 0) {
            return;
        }
        if (pos.y > Number(this.canvasheight) || pos.y < 0) {
            return;
        }
        this.parent.markerpos.colorpicker1last = pos;
        //    change c1 color on click
        let colorCanv = this.canvasContext.getImageData(pos.x, pos.y, 1, 1).data.slice(0,4);
        let color = this._getRGBA(colorCanv);
        this._updateInputs(colorCanv);
        //    Move Marker
        this.marker.style.transform = 'translate3d(-50%, -50%, 0)';
        this.marker.style.top = pos.y + 'px';
        this.marker.style.left = pos.x + 'px';
        this.marker.style.backgroundColor = color;

        this.marker.style.backgroundColor = color;
    }

    /****************************************************************************************************
      * Sets the Inputs to the parents value
     * Moves the Marker if the color can be found on the canvas
     * @param {*} value
     ****************************************************************************************************/
    _initializeOnOpen(value) {
        if (value) {
            let workVal = value;
            let offsetX = this.canvaswidth / 2;
            let offsetY = this.canvasheight / 2;
            if (this.parent.markerpos.colorpicker1act) {
                offsetX = this.parent.markerpos.colorpicker1act.x || 0;
                offsetY = this.parent.markerpos.colorpicker1act.y || 0;
            }

            this.queue.push(
                {
                    funct: '_setColor',
                    params: [
                        {
                            offsetX: Number(offsetX),
                            offsetY: Number(offsetY)
                        }]
                });
            this._doQueue();
        }
    }


}
customElements.define(LasalRuntimeSigControlColorpickerCircle.is, LasalRuntimeSigControlColorpickerCircle);
