☰

Figma: Increase Layers Panel Width Tool

This script has been reworked to include a button inside the toolbar to toggle the width of the left layers panel to 1500px.

Verzia zo dňa 18.04.2024. Pozri najnovšiu verziu.


    // ==UserScript==
    // @name         Figma: Increase Layers Panel Width Tool
    // @namespace    me.kalus.figmamorespace
    // @version      1.2
    // @description  This script has been reworked to include a button inside the toolbar to toggle the width of the left layers panel to 1500px.
    // @author       Michael Kalus
    // @match        https://www.figma.com/file/*
    // @icon         https://www.google.com/s2/favicons?sz=64&domain=figma.com
    // @grant        none
    // @license      MIT
    // ==/UserScript==



    (function() {


        function main() {

            // set left toolbar
            const toolbar = document.querySelector('[class*="toolbar_view--buttonGroup--"][class*="toolbar_view--leftButtonGroup--"]');

            if (toolbar) {
                // create new button, set inner HTML and append
                const newButton = document.createElement('div');
                newButton.innerHTML = '<span role="button" aria-label="Increase Left Panel Size" class="svg-container toolbar_view--iconButton--1MUm6 toolbar_styles--enabledButton--fEwmC" data-tooltip-type="lookup" data-tooltip="set-tool-increasewidth" tabindex="0" aria-pressed="false" data-fullscreen-intercept="true"><svg class="svg" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="#fff" fill-opacity="1" fill-rule="evenodd" stroke="none" d="M18.6.2H1.1c-.3,0-.5.2-.5.5v18.6c0,.3.2.5.5.5h17.5c.3,0,.5-.2.5-.5V.7c0-.3-.2-.5-.5-.5ZM1.6,1.2h11.1v17.6H1.6V1.2ZM18.1,18.7h-4.4V1.2h4.4v17.6Z"></path></svg></span>';
                toolbar.appendChild(newButton);

                // set new resizeButton
                const resizeButton = newButton.querySelector('.toolbar_view--iconButton--1MUm6');
                let isButtonClicked = false;

                // Add click event listener to the span button
                resizeButton.addEventListener('click', function() {
                    // Toggle background color, run width adjustments and start mutations observer
                    if (!isButtonClicked) {
                        resizeButton.style.backgroundColor = 'var(--color-bg-toolbar-selected, var(--bg-toolbar-active))';
                        setWidths();
                        observeMutations();
                    } else {
                        // reset background color, reset width adjustment and destroy mutations observer
                        resizeButton.style.backgroundColor = '';
                        revertWidths();
                        disconnectObserver();
                    }

                    isButtonClicked = !isButtonClicked;
                });
            } else {
                console.error('Target div not found');
            }

            let observer;

            // width adjustments
            function setWidths() {
                document.getElementById('left-panel-container').style.maxWidth = '1500px';

                const elements = document.querySelectorAll('[class*=left_panel_container--panel--]');
                elements.forEach((el) => {
                    el.style.width = '1500px';
                });

                const leftPanelContent = document.querySelectorAll('[class^="left_panel--content"]');
                leftPanelContent.forEach(content => {
                    content.style.width = '1500px';
                });

                const objectRows = document.querySelectorAll('[class^="object_row--row--"]');
                objectRows.forEach(row => {
                    row.style.width = '1500px';
                });

                const objectRowsInstanceChilds = document.querySelectorAll('[class^="object_row--instanceChild"]');
                objectRowsInstanceChilds.forEach(row => {
                    row.style.width = '1500px';
                });


                const topLevelRows = document.querySelectorAll('[class^="object_row--topLevel--"]');
                topLevelRows.forEach(row => {
                    row.style.width = '1500px';
                });

                const scrollContainers = document.querySelectorAll('[class^="objects_panel--scrollContainer"], [class^="pages_panel--scrollContainer"]');
                scrollContainers.forEach(container => {
                    container.style.width = '1500px';
                });
            }

            function observeMutations() {
                // Observe changes in the DOM subtree of the left sidebar and run width adjustments
                observer = new MutationObserver(mutations => {
                    mutations.forEach(mutation => {
                        if (mutation.type === 'childList') {
                            setWidths();
                        }
                    });
                });

                const config = { attributes: false, childList: true, subtree: true };

                const motionContainers = document.querySelectorAll('#react-page');
                motionContainers.forEach(container => {
                    observer.observe(container, config);
                });
            }

            // function to revert width adjustment
            function revertWidths() {
                document.getElementById('left-panel-container').style.maxWidth = '500px';

                const elements = document.querySelectorAll('[class*=left_panel_container--panel--]');
                elements.forEach((el) => {
                    el.style.width = '500px';
                });

                const leftPanelContent = document.querySelectorAll('[class^="left_panel--content"]');
                leftPanelContent.forEach(content => {
                    content.style.width = '500px';
                });


                const objectRowsInstanceChilds = document.querySelectorAll('[class^="object_row--instanceChild"]');
                objectRowsInstanceChilds.forEach(row => {
                    row.style.width = '500px';
                });

                const objectRows = document.querySelectorAll('[class^="object_row--row--"]');
                objectRows.forEach(row => {
                    row.style.width = '500px';
                });

                const topLevelRows = document.querySelectorAll('[class^="object_row--topLevel--"]');
                topLevelRows.forEach(row => {
                    row.style.width = '500px';
                });

                const scrollContainers = document.querySelectorAll('[class^="objects_panel--scrollContainer"], [class^="pages_panel--scrollContainer"]');
                scrollContainers.forEach(container => {
                    container.style.width = '500px';
                });
            }

            function disconnectObserver() {
                if (observer) {
                    observer.disconnect();
                }
            }

        };


        // mutation observer to wait if fimga is loaded
        function mutationCallback(mutationsList, observerMain) {
            for(var mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.id === 'fullscreen-root') {
                            main();
                            console.log("main executed");
                        }
                    });
                }
            }
        }

        const observerOptions = { childList: true, subtree: true };
        const observerMain = new MutationObserver(mutationCallback);

        observerMain.observe(document.documentElement, observerOptions);


    })();
长期地址
遇到问题？请前往 GitHub 提 Issues。