Picmix Scripts

// ==UserScript==
// @name        ♪‧₊˚ pixmix image adjustments+ v0.5
// @namespace   http://tampermonkey.net/
// @version     0.5b
// @description adds 'saturation', 'contrast', and 'luminosity' sliders to stamps and fixes tint for text objects
// @author      etoilee
// @match       *://*.picmix.com/maker/app*
// @grant       none
// ==/UserScript==

(function() {
    'use strict';

    if (typeof maker === 'undefined') {
        console.error("cannot initialize, picmix maker not found...");
        return;
    }

    //css
    const style = document.createElement('style');
    style.innerHTML = `
        .mk-editable-label-wrapper {
            display: flex;
            align-items: center;
        }
        .mk-editable-label {
            cursor: pointer;
            font-size:12px;
            text-decoration: underline;
            text-decoration-style: dashed;
            white-space: nowrap;
        }
        .mk-editable-input {
            width: 60px;
            text-align: center;
            border-radius: 3px;
            box-sizing: border-box;
            display: none;
        }
    `;
    document.head.appendChild(style);

    // html
    function addSlidersToDOM() {
        const optionsPanel = document.getElementById('mk-options-panel');
        if (optionsPanel) {
            const hueSection = optionsPanel.querySelector('[data-section="hue"]');
            const createSliderHTML = (id, labelText, min, max, step, defaultValue, unit) => `
                <section data-section="${id.replace('mk-', '').replace('-input', '')}">
                    <div class="lines">
                        <div class="line">
                            <label>
                                <div class="mk-editable-label-wrapper">
                                    <span class="mk-editable-label" data-target-input="${id}">${labelText}</span>
                                    <input type="number" id="${id}-text" class="mk-editable-input"
                                                min="${min}" max="${max}" step="${step}" value="${defaultValue}" data-unit="${unit}" />
                                </div>
                            </label>
                        </div>
                        <div class="line">
                            <input id="${id}" type="range" min="${min}" max="${max}" step="${step}"
                                        value="${defaultValue}" data-default-value="${defaultValue}" data-unit="${unit}" class="mk-slider" />
                        </div>
                    </div>
                </section>
            `;

            const saturationHTML = createSliderHTML("mk-saturation-input", "Saturation", -100, 200, 1, 100, "%");
            const contrastHTML = createSliderHTML("mk-contrast-input", "Contrast", -100, 200, 1, 100, "%");
            const luminosityHTML = createSliderHTML("mk-luminosity-input", "Luminosity", 0, 200, 1, 100, "%");

            if (hueSection) {
                hueSection.insertAdjacentHTML('afterend', luminosityHTML);
                hueSection.insertAdjacentHTML('afterend', contrastHTML);
                hueSection.insertAdjacentHTML('afterend', saturationHTML);
            } else {
                optionsPanel.insertAdjacentHTML('beforeend', saturationHTML);
                optionsPanel.insertAdjacentHTML('beforeend', contrastHTML);
                optionsPanel.insertAdjacentHTML('beforeend', luminosityHTML);
            }
            console.log("options panel update successful");
        } else {
            console.error("could not update options, not found");
        }
    }

    if (typeof maker.getTextPatternObject === 'undefined') {
        maker.getTextPatternObject = function(_textObject) {
            if (_textObject && _textObject.isText) {
                return _textObject.getObjects().find(o => o.isTextRect);
            }
            return _textObject;
        };
    }

    // get object to apply filters to
    function getFilterTargetObject(obj) {
        if (maker.isTextObject(obj)) {
            // apply filter to the pattern if text object
            const textPatternObject = maker.getTextPatternObject(obj);
            if (textPatternObject && (textPatternObject.isType("image") || textPatternObject.isType("sprite"))) {
                return textPatternObject;
            }
            //otherwise apply filter to object directly
            return obj;
        }
        return obj;
    }

    // get filter
    function updateObjectFilter(object, filterType, propertyName, value) {
        const targetObject = getFilterTargetObject(object);

        // if text pattern is not image
        if (maker.isTextObject(object) && !(targetObject.isType("image") || targetObject.isType("sprite"))) {
            if (filterType === fabric.Image.filters.HueRotation) {
                const hueDegrees = (value + 1) * 180;
                const originalColor = new fabric.Color(object.fill);
                const hsl = originalColor.toHSL();
                hsl.h = hueDegrees;
                object.set('fill', new fabric.Color(hsl).toRgb());
                object.dirty = true;
                maker.canvas.requestRenderAll();
                maker.setDirtyTextObject(object);
                return;
            }
        }


        if (!targetObject || !targetObject.filters) {
            return;
        }

        let filter = targetObject.filters.find(f => f instanceof filterType);

        const defaultValue = filterType.DEFAULT_VALUE !== undefined ? filterType.DEFAULT_VALUE : (propertyName === 'brightness' ? 0 : 1);

        if (value === defaultValue) {
            if (filter) {
                targetObject.filters = targetObject.filters.filter(f => f !== filter);
            }
        } else {
            if (!filter) {
                filter = new filterType();
                targetObject.filters.push(filter);
            }
            filter[propertyName] = value;
        }

        targetObject.filters = targetObject.filters.filter(f => f);

        targetObject.applyFilters();
        if (maker.isTextObject(object)) {
            maker.setDirtyTextObject(object);
        }
    }

    // default definitions (maybe change later)
    fabric.Image.filters.Saturation.DEFAULT_VALUE = 1;
    fabric.Image.filters.Contrast.DEFAULT_VALUE = 1;
    fabric.Image.filters.Brightness.DEFAULT_VALUE = 0;
    fabric.Image.filters.HueRotation.DEFAULT_VALUE = 0;


    maker.onSaturationInputChange = function () {
        const activeObjects = maker.canvas.getActiveObjects();
        const value = parseInt($(this).val()) / 100;

        activeObjects.forEach(function (obj) {
            if (maker.isImageObject(obj) || maker.isSpriteObject(obj) || maker.isTextObject(obj)) {
                updateObjectFilter(obj, fabric.Image.filters.Saturation, 'saturation', value);
            }
        });
        maker.canvas.requestRenderAll();
    };

    maker.onContrastInputChange = function () {
        const activeObjects = maker.canvas.getActiveObjects();
        const value = parseInt($(this).val()) / 100;

        activeObjects.forEach(function (obj) {
            if (maker.isImageObject(obj) || maker.isSpriteObject(obj) || maker.isTextObject(obj)) {
                updateObjectFilter(obj, fabric.Image.filters.Contrast, 'contrast', value);
            }
        });
        maker.canvas.requestRenderAll();
    };

    maker.onLuminosityInputChange = function () {
        const activeObjects = maker.canvas.getActiveObjects();
        const value = (parseInt($(this).val()) - 100) / 100;
        activeObjects.forEach(function (obj) {
            if (maker.isImageObject(obj) || maker.isSpriteObject(obj) || maker.isTextObject(obj)) {
                updateObjectFilter(obj, fabric.Image.filters.Brightness, 'brightness', value);
            }
        });
        maker.canvas.requestRenderAll();
    };

    const originalOnHueInputChange = maker.onHueInputChange;

    maker.onHueInputChange = function (event) {
        const activeObjects = maker.canvas.getActiveObjects();
        let value = (parseInt($(this).val()) / 50) - 1;

        activeObjects.forEach(function (obj) {
            if (maker.isTextObject(obj)) {
                const textPatternObject = maker.getTextPatternObject(obj);
                if (textPatternObject && (textPatternObject.isType("image") || textPatternObject.isType("sprite"))) {
                     updateObjectFilter(obj, fabric.Image.filters.HueRotation, 'rotation', value);
                } else {
                    const originalFill = new fabric.Color(obj.fill);
                    const hsl = originalFill.toHSL();


                    let currentHueDegrees = hsl.h;
                    let rotatedHueDegrees = (currentHueDegrees + (value * 180)) % 360; 
                    if (rotatedHueDegrees < 0) {
                        rotatedHueDegrees += 360;
                    }
                    hsl.h = rotatedHueDegrees;
                    obj.set('fill', new fabric.Color(hsl).toRgb());
                    obj.dirty = true;
                    maker.setDirtyTextObject(obj);
                }
            } else if (maker.isImageObject(obj) || maker.isSpriteObject(obj)) {
                updateObjectFilter(obj, fabric.Image.filters.HueRotation, 'rotation', value);
            }
        });
        maker.canvas.requestRenderAll();
    };


    const originalUpdatePanel = maker.updatePanel;
    maker.updatePanel = function() {
        originalUpdatePanel.apply(this, arguments);

        const activeObjects = maker.canvas.getActiveObjects();
        let applicableObjects = [];

        activeObjects.forEach(obj => {
            if (maker.isImageObject(obj) || maker.isSpriteObject(obj) || maker.isTextObject(obj)) {
                applicableObjects.push(obj);
            }
        });

        const canApplyFilters = applicableObjects.length > 0;

        const saturationInput = $("#mk-saturation-input");
        const contrastInput = $("#mk-contrast-input");
        const luminosityInput = $("#mk-luminosity-input");
        const hueInput = $("#mk-hue-input"); 

        const saturationTextInput = $("#mk-saturation-input-text");
        const contrastTextInput = $("#mk-contrast-input-text");
        const luminosityTextInput = $("#mk-luminosity-input-text");


        const saturationLabel = $('span[data-target-input="mk-saturation-input"]');
        const contrastLabel = $('span[data-target-input="mk-contrast-input"]');
        const luminosityLabel = $('span[data-target-input="mk-luminosity-input"]');


        const saturationSection = $("#mk-context-panel").find("[data-section=\"saturation\"]");
        const contrastSection = $("#mk-context-panel").find("[data-section=\"contrast\"]");
        const luminositySection = $("#mk-context-panel").find("[data-section=\"luminosity\"]");
        const hueSection = $("#mk-context-panel").find("[data-section=\"hue\"]"); // Get the existing hue section

        if (canApplyFilters) {
            let totalSaturation = 0;
            let totalContrast = 0;
            let totalLuminosity = 0;
            let totalHueRotation = 0; 

            applicableObjects.forEach(obj => {
                const targetObject = getFilterTargetObject(obj);

                if (targetObject && targetObject.filters) {
                    let objSaturation = fabric.Image.filters.Saturation.DEFAULT_VALUE;
                    let objContrast = fabric.Image.filters.Contrast.DEFAULT_VALUE;
                    let objLuminosity = fabric.Image.filters.Brightness.DEFAULT_VALUE;
                    let objHueRotation = fabric.Image.filters.HueRotation.DEFAULT_VALUE;

                    targetObject.filters.forEach(filter => {
                        if (filter instanceof fabric.Image.filters.Saturation) {
                            objSaturation = filter.saturation;
                        } else if (filter instanceof fabric.Image.filters.Contrast) {
                            objContrast = filter.contrast;
                        } else if (filter instanceof fabric.Image.filters.Brightness) {
                            objLuminosity = filter.brightness;
                        } else if (filter instanceof fabric.Image.filters.HueRotation) {
                            objHueRotation = filter.rotation;
                        }
                    });
                    totalSaturation += objSaturation;
                    totalContrast += objContrast;
                    totalLuminosity += objLuminosity;
                    totalHueRotation += objHueRotation;
                } else if (maker.isTextObject(obj) && !targetObject.isType("image") && !targetObject.isType("sprite")) {
                    // for plain text with no fill (no use since plain text is always black?)
                    totalHueRotation += fabric.Image.filters.HueRotation.DEFAULT_VALUE;
                }
            });

            const avgSaturation = totalSaturation / applicableObjects.length;
            const avgContrast = totalContrast / applicableObjects.length;
            const avgLuminosity = totalLuminosity / applicableObjects.length;
            const avgHueRotation = totalHueRotation / applicableObjects.length;


            saturationInput.val(Math.round(avgSaturation * 100));
            contrastInput.val(Math.round(avgContrast * 100));
            luminosityInput.val(Math.round((avgLuminosity + 1) * 100));
            hueInput.val(Math.round((avgHueRotation + 1) * 50));

            saturationInput.prop("disabled", false);
            contrastInput.prop("disabled", false);
            luminosityInput.prop("disabled", false);
            hueInput.prop("disabled", false); 

            saturationTextInput.prop("disabled", false);
            contrastTextInput.prop("disabled", false);
            luminosityTextInput.prop("disabled", false);


            saturationSection.removeClass('disabled');
            contrastSection.removeClass('disabled');
            luminositySection.removeClass('disabled');
            hueSection.removeClass('disabled'); 


        } else {
            saturationInput.prop("disabled", true).val(saturationInput.data('default-value'));
            contrastInput.prop("disabled", true).val(contrastInput.data('default-value'));
            luminosityInput.prop("disabled", true).val(luminosityInput.data('default-value'));
            hueInput.prop("disabled", true).val(0); 

            saturationTextInput.prop("disabled", true);
            contrastTextInput.prop("disabled", true);
            luminosityTextInput.prop("disabled", true);

            saturationSection.addClass("disabled");
            contrastSection.addClass("disabled");
            luminositySection.addClass("disabled");
            hueSection.addClass("disabled");

            saturationLabel.text('Saturation');
            contrastLabel.text('Contrast');
            luminosityLabel.text('Luminosity');
        }
    };

    // tippy tooltip
    function setupSliderPreview() {
        let sliderPreviewDiv = $('#' + maker.sliderPreviewValueDivId);
        if (sliderPreviewDiv.length === 0) {
            sliderPreviewDiv = $("<div />", {
                'id': maker.sliderPreviewValueDivId,
                'class': 'mk-slider-value-preview'
            }).appendTo($("body"));
        }

        $('#mk-saturation-input, #mk-contrast-input, #mk-luminosity-input, #mk-hue-input').on("input mousedown", function (event) {
            const _0x1d9c08 = $(this);
            const _0x2377f0 = _0x1d9c08.attr("data-unit");
            const _0x3402cd = _0x1d9c08.val() + (_0x2377f0 || '');
            const _0x589990 = _0x1d9c08.offset().top;

            const _0x113797 = maker.mousePosition ? maker.mousePosition.x : event.clientX;

            sliderPreviewDiv.html(_0x3402cd).css({
                'top': _0x589990 + 'px',
                'left': _0x113797 + 'px'
            }).show();
        });

        $('#mk-saturation-input, #mk-contrast-input, #mk-luminosity-input, #mk-hue-input').on("change mouseup", function () {
            sliderPreviewDiv.hide();
        });
    }

    // make labels editable
    function setupEditableLabels() {
        $('.mk-editable-label').each(function() {
            const labelSpan = $(this);
            const sliderId = labelSpan.data('target-input');
            const sliderInput = $(`#${sliderId}`);
            const textInput = $(`#${sliderId}-text`);
            const originalLabelText = labelSpan.text();

            labelSpan.text(originalLabelText);

            labelSpan.on('click', function() {
                if (sliderInput.prop('disabled')) {
                    return;
                }
                labelSpan.hide();
                textInput.val(sliderInput.val() + (sliderInput.data('unit') || ''));
                textInput.show();
                textInput.focus();
                textInput.select();
            });

            const applyValueFromTextInput = function() {
                const rawValue = textInput.val();
                let numericValue = parseFloat(rawValue);

                const unit = sliderInput.data('unit');
                if (unit && rawValue.endsWith(unit)) {
                    numericValue = parseFloat(rawValue.slice(0, -unit.length));
                }

                const min = parseFloat(sliderInput.attr('min'));
                const max = parseFloat(sliderInput.attr('max'));
                const defaultValue = parseFloat(sliderInput.data('default-value'));

                if (isNaN(numericValue)) {
                    numericValue = defaultValue; // fallback
                } else if (numericValue < min) {
                    numericValue = min;
                } else if (numericValue > max) {
                    numericValue = max;
                }

                numericValue = Math.round(numericValue);

                sliderInput.val(numericValue);
                sliderInput.trigger('input'); // trigger input for live updates
                sliderInput.trigger('change'); // trigger change for final update

                // hide the input, display the label
                labelSpan.text(originalLabelText);
                textInput.hide();
                labelSpan.show();
            };

            textInput.on('blur', applyValueFromTextInput);
            textInput.on('keypress', function(e) {
                if (e.which === 13) { // enter key is the default
                    e.preventDefault();
                    applyValueFromTextInput();
                }
            });
        });
    }

    // init
    setTimeout(() => {
        addSlidersToDOM();

        $("#mk-saturation-input").on("input change", maker.onSaturationInputChange);
        $("#mk-contrast-input").on("input change", maker.onContrastInputChange);
        $("#mk-luminosity-input").on("input change", maker.onLuminosityInputChange);
        $("#mk-hue-input").off("input change").on("input change", maker.onHueInputChange); 

        setupSliderPreview();

        setupEditableLabels();

        console.log("picmix image adjustment userscript loaded");

        maker.updatePanel();

    }, 1000); //wait 1000 ms
})();